angular - Angular Material テーブル内の FormArray

Question

注: 以下に示すように、従来の HTML テーブル内で FormArray を実行することに成功しました。Angular Material テーブル内に FormArray を配置し、それにデータを入力したいと考えています。従来の HTML テーブルと同じアプローチを試みましたが、「ID 'name'' の列が見つかりませんでした」というエラーが発生してコンパイルできませんでした。

<div class="form-group">
<form [formGroup]="myForm" role="form">
  <div formArrayName="formArrList">
    <table>
      <tr>
        <th>Name</th>
        <th>School</th>

      </tr>

      <tr *ngFor="let list of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">
        <td>
          <div class="col-sm-6">
            <input class="form-control" type="text"  formControlName="name"/>
          </div>
        </td>
        <td>
          <div class="col-sm-6">
            <input class="form-control" type="text"  formControlName="school"/>
          </div>
        </td>
      </tr>
    </table>
  </div>
</form>

Angular Material Table 内に FormArray を作成しようとしています これが私の HTML ファイルです

<div>
<form [formGroup]="myForm" role="form">
  <ng-container formArrayName="formArrList">

  <mat-table #table [dataSource]="myDataSource">
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>


    <ng-container *ngFor="let detailsItems of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">


    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let element"> 

        <mat-form-field class="" hideRequiredMarker>
      <input matInput formControlName="name" type="text" class="form-control"
             autocomplete="off"
             placeholder="name">
      </mat-form-field>

      </mat-cell>
    </ng-container>



    <ng-container matColumnDef="school">
      <mat-header-cell *matHeaderCellDef>School</mat-header-cell>
      <mat-cell *matCellDef="let element"> 

       <mat-form-field class="" hideRequiredMarker>
      <input matInput formControlName="school" type="text" class="form-control"
             autocomplete="off"
             placeholder="school">
      </mat-form-field>
      </mat-cell>
    </ng-container>

    </ng-container>



  </mat-table>
  </ng-container>

</form>

そして、これが私の.TSファイルの一部です

@Component(..)
export class DemO implements OnInit {

 displayedColumns = ['name', 'school'];
  myForm: FormGroup;

  formArrList: FormArray;

   myDataSource: DataSource;
   dummyData: Element[] = [];


   ngOnInit(): void {

    //init form arrayTree
    this.myForm = this.formBuilder.group({
      'formArrList': new FormArray([])
    });

  }

    initTreeFormArray(name: string, school: string) {
    return this.formBuilder.group({
      'name': [code_any,],
      'school': [prio,]
    });
  }


  renderTableOnButtonClick(){
       const control = <FormArray>this.treeForm.controls['formArrList']; 
       control.push(this.initTreeFormArray("DummyName", "DummySchool", element.name));



      this.dummyData.push({name: "DummyName", school: "DummySchool"});
      this.myDataSource = new sDataSource(this.dummyData);


}