I am working with an Array of arrays in my data, and they are structured like this : https://i.sstatic.net/3grh6.png
Now, I am trying to showcase this array in a table, but all I am getting is a blank page. Here is the HTML code for the table (I have included only the first column's code due to length constraints) :
<table mat-table [dataSource]="dataPur" class="mat-elevation-z8" matSort>
Name Column
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Type </th>
<td mat-cell *matCellDef="let element; let i = index"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Component.ts :
name:string[] = [];
iItem:number[] = [];
iTotal:number[] = [];
qty:number[] = [];
dataPur:any[] = [];
displayedColumns: string[] = ['name','iItem', 'iTotal','pretemp', 'qty'];
ngAfterViewInit() {
for(var i = 0; i < this.data.docDetailes.length; i++){
this.dataPur[i] = [
this.name[i] = this.data.docDetailes[i].name,
this.iItem[i] = this.data.docDetailes[i].iItem,
this.iTotal[i] = this.data.docDetailes[i].iTotal,
this.qty[i] = this.data.docDetailes[i].qty
]
}
console.log(this.dataPur);
}
Can anyone provide some assistance?