在 table 中显示数组数组

Question

我的数据中有一个数组数组，它们看起来像这样：

现在我想在 table 中显示这个数组，但我得到的只是空页面，这是我的 html 用于 table（因为代码长度我仅添加第一列代码：

<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);
  }

有人可以帮忙吗？

Answer 1

通常 mat-table 的数据源是一个对象数组（不是数组数组）所以应该是

for(var i = 0; i < this.data.docDetailes.length; i++){
 this.dataPur[i] = {
    name:this.data.docDetailes[i].name,
    iItem: this.data.docDetailes[i].iItem,
    iTotal: this.data.docDetailes[i].iTotal,
    qty: this.data.docDetailes[i].qty
 }
}

但是你真的可以使用数组的数组，唯一的是你的 td 应该像

<ng-container *ngFor="let column of displayedColumns;let index=index"
     [matColumnDef]="column">
    <th mat-header-cell *matHeaderCellDef>{{column}}</th>
    <td mat-cell *matCellDef="let element; let i = index"> 
         {{element[index]}} 
    </td>
</ng-container>

明白这不是魔法。 “元素”是“行”，所以如果我们有一个对象数组，我们使用 element.[name of property] 如果我们有一个数组简单使用 element[index]

在 table 中显示数组数组

Display Array of arrays in a table

html-table

typescript

angular