CODEWITHSUNDEEP
angulartypescriptangular-material
Manisha
Manisha

Reputation: 195

Not able to show data on mat table with no error

i am new in angular, I am not able to show data on my mat table and it not showing any error. I am able to see column name, but not the data. Can anybody tell me what i did wrong in this.

api.service.ts

    export class ApiService {
     dataRow:any;
    }
constructor(private httpClient : HttpClient) { }

service.component.html

<tr mat-header-row *matHeaderRowDef="['sid','vid','serviceName','createdOn']"></tr>
        <tr class="rowhover" (click)="displayData(row,row.sid)" mat-row *matRowDef="let row; columns: ['sid','vid','serviceName','createdOn']"></tr>
        </table>

service.component.ts

 displayData(row,sid:any)
  {
   // console.log(row);    
    this.apiService.dataRow=row;
   this.router.navigate(["/vendor-list/vendor/a/services/a/details/",sid]);
  }

service-detail.component.html

 <table mat-table [dataSource]="serviceDetailsDataSource" class="mat-elevation-z1">
            <ng-container matColumnDef="sid">
                <th mat-header-cell *matHeaderCellDef> Service ID </th>
                <td mat-cell *matCellDef="let element"> {{element.sid}} </td>
            </ng-container>

            <ng-container matColumnDef="vid">
                <th mat-header-cell *matHeaderCellDef> Vendor ID </th>
                <td mat-cell *matCellDef="let element"> {{element.vid}} </td>
            </ng-container>

            <ng-container matColumnDef="serviceName">
                <th mat-header-cell *matHeaderCellDef> Service Name </th>
                <td mat-cell *matCellDef="let element"> {{element.serviceName}} </td>
            </ng-container>

            <ng-container matColumnDef="serviceDescription">
                <th mat-header-cell *matHeaderCellDef> Service Description </th>
                <td mat-cell *matCellDef="let element"> {{element.serviceDescription}} </td>
            </ng-container>

            <ng-container matColumnDef="createdOn">
                <th mat-header-cell *matHeaderCellDef> Created On </th>
                <td mat-cell *matCellDef="let element"> {{element.createdOn}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="['sid','vid','serviceName','serviceDescription','createdOn']"></tr>
            <tr mat-row *matRowDef="let row; columns: ['sid','vid','serviceName','serviceDescription','createdOn']"></tr>
            </table>

service-detail.component.ts

import { Component, OnInit  } from '@angular/core';
import { ApiService } from 'src/app/api.service';
import { MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-service-detail',
  templateUrl: './service-detail.component.html',
  styleUrls: ['./service-detail.component.css']
})
export class ServiceDetailComponent implements OnInit {

  serviceDetailsDataSource:any;

  serviceDetailsDisplayedColumns: string[] = ['serviceID', 'vendorID', 'createdOn'];
  /*serviceDetailsDataSource = SERVICE_DETAILS_DATA;*/

  constructor(public apiService:ApiService) { }
  dataRow1:any;
  ngOnInit() {
    this.dataRow1=this.apiService.dataRow;
    //this.serviceDetailsDataSource=this.dataRow1;
    this.serviceDetailsDataSource=new MatTableDataSource(this.dataRow1); 
    console.log(this.serviceDetailsDataSource)
  }

}

Upvotes: 0

Views: 900

Answers (2)

Ashish Mishra
Ashish Mishra

Reputation: 534

Your data which is coming from api is in json format, so you just to need to put square bracket in MatTableDataSource([this.dataRow1]);

Upvotes: 1

Goskula Jayachandra
Goskula Jayachandra

Reputation: 4201

You need to include the data you are getting from service in an array.

change 

 this.serviceDetailsDataSource=new MatTableDataSource(this.dataRow1);

to

this.serviceDetailsDataSource=new MatTableDataSource([this.dataRow1]);

Hope this helps!

Upvotes: 3

Related Questions