создать динамический мат-стол, похожий на математическую матрицу, с угловым материалом

когда у вас есть матрица, у вас есть FormArray из FormArrays, например. Если у вас есть такие данные, как

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

Вы можете отформатировать formArray из FormArray как (**)

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

Когда вы используете таблицу mat, вам понадобится «displayColumns», массив со столбцами, которые вы хотите отобразить. Если вы хотите, чтобы была кнопка «удалить», вы можете использовать другую переменную подробнее

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

Что ж, он почти готов, я добавил еще одну новую переменную, которая указывает количество столбцов, которые у вас есть - это позволяет нам добавить новую строку - и таблицу с помощью viewChild

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

Наша таблица готова это показать:

<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>

Посмотрите, что dataSource равен myformArray.controls, а на входе [formControl]="element.at(j), да, "element is the inner formArray"

Вы можете увидеть пример в stackblitz (*)

Я добавляю две функции для добавления и удаления строки

  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()

  }

(*) В stackblitz я добавил директиву, позволяющую перемещаться по ячейкам с помощью клавиш со стрелками

(**) В вашем случае вы форматируете массив формы как

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