angular - Angular 7 和 Reactive form Array 正在返回无法找到带有路径的控件的错误

Question

我正在从服务器获取数据到组件。

此数据包含称为Family Relation具有多个值的内容，可以从下拉列表中选择以更改原始家庭关系值。

我想要的是使用 Reactive Forms 创建一个表单控件输入数组，以在角度材料表数据源的每一行显示下拉列表。

这是一个有效的堆栈闪电战，可以让您对问题有一个很好的了解。

这是脚本。familyRelationArray我用 2 个数组示例（和）替换了服务器数据data：

getFamilyRelation() 方法获取关系的类型并显示它们。在 stackblitz 中，您可以看到下拉列表菜单位于底部（这在我的计算机上不是问题）：

getFamilyRelation() {

    //This function gets data from server, but for testing purposes, I filled an array:
    this.familyRelationArray = [
      {
        id: 1,
        type: 'Father'
      },
      {
        id: 2,
        type: 'Mother'
      },
      {
        id: 3,
        type: 'Sister'
      }
    ]
  }

getData()方法是获取原始数据并通过将结果应用到dataSource具有以下类型的材料表中显示它们dataSource = new MatTableDataSource<any>();：

getData() {
    //For testing purposes, I filled an array of data instead of getting data from servers
    this.data = [
      {
        name: 'xyz', head_hh: 'Yes', fr: 'Parent', frid: 2, ms: 'Married', sts: 'Active', age: '61', iid: 123
      },
      {
        name: 'yxz', head_hh: 'No', fr: 'Child', frid: 3, ms: 'Single', sts: 'Active', age: '25', iid: 221
      },
    ]
    this.showEmpty = false;
    this.dataSource = new MatTableDataSource((this.data));
    this.resultsLength = this.data.length;
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;


  }

这是 FormArray 方法，它在每一行创建下拉列表：

constructor(private fb: FormBuilder) {
    this.formGroup = this.fb.group({
      test: this.createArray()
    })
  }

createArray(): FormArray {
    return new FormArray(this.dataSource.data.map(item => new FormGroup({
      fr: new FormControl(item.frid)
    })));
  }

html 脚本，包含使用创建的表单数组formArrayName="test"，创建的下拉列表的索引在formGroupName="i"哪里：i

<form [formGroup]="formGroup">
    <mat-card class="example-card">
        <mat-card-content>
            <div class="example-container mat-elevation-z8">
                <table mat-table [dataSource]="dataSource" matSort formArrayName="test">

                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef> Name </th>
                        <td mat-cell *matCellDef="let element"> <b>{{element.name}}</b> </td>

          </ng-container>


          <ng-container matColumnDef="head_hh">
            <th mat-header-cell *matHeaderCellDef> Head Of HH </th>
            <td mat-cell *matCellDef="let element"> {{element.head_hh}} </td>
          </ng-container>


          <ng-container matColumnDef="fr" >
            <th mat-header-cell *matHeaderCellDef> Family Rel. </th>
            <td mat-cell *matCellDef="let element; let i = index;">
              <div [formGroupName]="i">
                <mat-form-field color="warn" appearance="outline">
                    <mat-label>Drop List</mat-label>
                    <mat-select id="family_relation" formControlName="fr" placeholder="Drop List">                 
                          <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="frid">
                        {{familyRelation.type}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>&nbsp;
                </div>
                  <i>Original Value: {{element.fr}}</i>
            </td>
          </ng-container>

          <ng-container matColumnDef="ms">
            <th mat-header-cell *matHeaderCellDef> Marital Sts. </th>
            <td mat-cell *matCellDef="let element"> {{element.ms}} </td>
          </ng-container>
          <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef> Status </th>
            <td mat-cell *matCellDef="let element"> {{element.sts}} </td>
          </ng-container>
          <ng-container matColumnDef="age">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Age </th>
            <td mat-cell *matCellDef="let element"> {{element.age}} </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator [length]="resultsLength" [pageSizeOptions]="[15, 25, 50, 100]"></mat-paginator>
      </div>
    </mat-card-content>
    <mat-card-actions>
    </mat-card-actions>
  </mat-card>
</form>

错误是我无法将每个下拉列表的值设置为等于每个下拉列表orignal value下显示的值，并且控制台出现错误：

ERROR 错误：找不到带有路径的控件：'test

我在堆栈上尝试了这篇文章的解决方案，但没有任何效果。

标签： angularangular-reactive-formsangular7angular-material-6formarray