I'm struggling to populate data using an angular material table.
Here is the component:
export class CertificateTableComponent {
dataSource: MatTableDataSource<any>;
//certificates: ValueEntity[] = [];
data: CertificateRow[] = [];
columns: string[] = ['name', 'id', 'type', 'publicCertificate'];
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;
constructor(private _integrationAccountService: integrationAccountService) {
}
ngOnInit() {
this._integrationAccountService.getcertificates().subscribe(response => {
//this.certificates = response.data;
this.data = [];
if (response.value) {
for (let entity of response.value) {
let row: CertificateRow = {
name: entity.name,
id: entity.id,
type: entity.type,
publicCertificate: entity.properties?.publicCertificate
};
}
}
this.dataSource = new MatTableDataSource(this.data);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
})
}
}
This is the table:
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{ row.name }}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row">{{ row.id }}</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
<td mat-cell *matCellDef="let row">{{ row.type }}</td>
</ng-container>
<ng-container matColumnDef="publicCertificate">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Public Certificate</th>
<td mat-cell *matCellDef="let row">{{ row.publicCertificate }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns"></tr>
<tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>
Despite receiving correct values in the console response, the dataSource remains empty. Unsure of what I am overlooking when passing data to the table.