Hello everyone, I am a novice in Angular and I seem to be encountering an issue with displaying data on my mat table. Surprisingly, no errors are being shown. While I can see the column names, the actual data is not visible. Can someone help me figure out what mistake I might have made?
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)
}
}