在mat-table的table标记中使用multiTemplateDataRows和formArrayName时出错

Question

我一直试图将multiTemplateDataRows与反应表单一起使用，并在mat表的table标签中给定formArrayName，但得到的错误是找不到路径为'bankRelationData->的控件，

但是，当我从table标记中删除multiTemplateDataRows指令时，这可以很好地工作，请找到以下代码

table.component.html

<form [formGroup]="bankRelationForm">
<table mat-table [dataSource]="dataSource" multiTemplateDataRows formArrayName="bankRelationData" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> 
<div>
{{element.name}} 
</div>
</td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<ng-container matColumnDef="secondary" >
<td mat-cell [attr.colspan]="displayedColumns.length" *matCellDef="let element"> 
<textarea></textarea>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>
<button *ngIf="!isEdited" mat-raised-button color="primary" (click)="onEdit()">Edit</button> </th>
<td mat-cell *matCellDef="let element; let i = index"> 
<button *ngIf="isEdited" mat-mini-fab class="add-btn" matTooltip="Add comment" color="primary" (click)="onAdd(element.position)">+</button>
<button *ngIf="isEdited" mat-mini-fab class="add-btn" color="warn" (click)="onRemove(element.position)">-</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row;let i=index; columns: displayedColumns;"
[formGroupName]="i"></tr>
<tr mat-row *matRowDef="let row;let i=index; columns: ['secondary'];" [style.display]="elementArr[row.position]===1?'':'none'" [formGroupName]="i">
</tr>
</table>
</form>
<div *ngIf="isEdited" class="action-btn">
<button mat-raised-button matTooltip="Add comment" (click)="onCancel()">Cancel</button>
<button mat-raised-button color="primary" (click)="onEdit()">Save</button>
</div>

表格组件.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','actions'];
isEdited:boolean;
elementArr:any=[].fill(0);
bankRelationForm: FormGroup;
dataSource =[
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
];
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.formInitialize();
this.setForm();
}
formInitialize(){
this.bankRelationForm = this.fb.group({
bankRelationData: this.fb.array([])
});
}
setForm(){
const control = <FormArray>this.bankRelationForm.get('bankRelationData');
for( const d of this.dataSource){
const row = this.fb.group({
position:[d.position? d.position : null],
name:[d.name? d.name : null],
weight:[d.weight? d.weight : null],
symbol:[d.symbol? d.symbol : null],
});
control.push(row);
}
console.log(control)
}
onAdd(i) {
this.elementArr[i]=1;
}
onRemove(i){
this.elementArr[i]=0;
}
onEdit(){
this.isEdited = true;
}
onCancel(){
this.isEdited = false;
}
}

此外，我在这里有stcakblitz

Answer 1

您必须在行中使用dataIndex或renderIndex，如下所示：

<td mat-cell *matCellDef="let element;let i = dataIndex;" [formGroupName]="i">
</td>