Angular 使用角材质创建类似数学矩阵的动态mat表

我有一个关于创建表的问题。我的结构数据是动态的，这意味着行和列的数量是可变的，就像矩阵

m*n

一样。而struct在上可用。

我想将

json（上图）

显示到mat table。但我无法正确地将数据分配到表中，它会在表中显示重复数据。对于mat table的所有行，显示

column0

而表中的正确数据应该是

我的代码在上可用

在这段代码中，我想创建一个带有

5

列和

6

行的表

---

我如何求解它并显示此表中的所有数据？

当您有一个矩阵时，您有一个FormArray of FormArray，例如，如果您有如下数据

export const data=[['uno','one'],['dos','two'],['tres','three']]

您可以像（**）一样格式化formArray的formArray

使用mat表时，需要一个“displayedColumns”，一个包含要显示的列的数组。如果你想有一个按钮“删除”，你可以使用另一个变量更多

  displayedHeads: string[] = data[0].map((x,index)=>'col'+index);
  displayedColumns: string[] = this.displayedHeads.concat('delete')

很快就要准备好了，我添加了一个新变量more，它指示您拥有的列数-这允许我们添加一个新行-以及使用viewChild的表

  columns: number = data[0].length;
  @ViewChild(MatTable, { static: true }) table: MatTable<any>; 

（*）在stackblitz中，我添加了一个指令，允许使用箭头键跨单元格移动

（**）在本例中，将表单数组格式化为

myformArray = new FormArray(
        data.map(row=>new FormArray(
            row.map(x=>new FormControl(x.c))
  )))

<button mat-button (click)="add()">Add row</button>
<table mat-table [dataSource]="myformArray.controls" class="mat-elevation-z8">
  <!-- Name Column -->
  <ng-container *ngFor="let head of displayedHeads;let j=index" [matColumnDef]="head">
    <th mat-header-cell *matHeaderCellDef> {{head}} </th>
    <td mat-cell *matCellDef="let element">
      <input [formControl]="element.at(j)">
    </td>
  </ng-container>

  <ng-container matColumnDef="delete">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element;let i=index;">
      <button mat-button (click)="delete(i)">delete</button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

  delete(index: number) {
    this.myformArray.removeAt(index);
    this.table.renderRows()

  }
  add() {
    const empty = [];
    for (let i = 0; i < this.columns; i++)
      empty.push(true)

    this.myformArray.push(
      new FormArray(empty.map(x => new FormControl('')))
    )
    this.table.renderRows()

  }

myformArray = new FormArray(
        data.map(row=>new FormArray(
            row.map(x=>new FormControl(x.c))
  )))