使用 removeAt 时，Angular FormArray 不会删除项目

Question

我有一个 FormArray，下面有一个列表项。我想创建一个按钮来删除 ArrayForm 下的项目。当我单击按钮时，它会清除表单值，但不会从前端删除该项目。不知道我在哪里失踪。

app.component.ts

export class AppComponent  {
  name = 'Angular2+ Reactive Form';
  testForm: FormGroup;
  classGridDisplayedColumns = [
    "radioButtons"
  ];
  data = {
    radioButtons: [
      {radio: 'Y'},
      {radio: 'N'},
      {radio: 'N'}
    ]
  };
  constructor(private readonly fb: FormBuilder){
    this.testForm = this.fb.group({
      radioButtons: this.fb.array(
        this.data.radioButtons.map(radioButton => this.generateRadioButtons(radioButton))
      )
    });
  }

  private generateRadioButtons(radioButton) {
    return this.fb.group({
      radio: [ radioButton.radio, Validators.required ],      
    })
  }

  deleteRow(index) {
    console.log('Delete row...');  
    (<FormArray>this.testForm.controls.radioButtons).removeAt(index);
  }

  onSubmit() {
    console.log(this.testForm);
  }
}

app.component.html

<form name="testForm" [formGroup]="testForm" (ngSubmit)="onSubmit()" novalidate>
  <div formArrayName="radioButtons">
    <table mat-table [dataSource]="testForm.controls['radioButtons'].controls">        
      <ng-container matColumnDef="radioButtons">
        <th mat-header-cell *matHeaderCellDef class="radio">Radio Buttons</th>
        <td mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i" class="radio">    
          <mat-radio-group name="radio-{{i}}" formControlName="radio" required disableOptionCentering>
            <mat-radio-button value="Y">Yes</mat-radio-button>
            <mat-radio-button value="N">No</mat-radio-button>
          </mat-radio-group>    
          <button type="button" (click)="deleteRow(i)">Delelet Row</button>        
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="classGridDisplayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: classGridDisplayedColumns;"></tr>
    </table>
  </div>
  <pre>{{ testForm.value | json }}</pre>
</form>

您可以在这里找到演示：https://stackblitz.com/edit/angular2-reactive-form-table

Answer 1

您需要首先使用ViewChild 获取Mat Table 的实例，然后在删除后使用this.matTable.renderRows() 呈现更新的行：

已更新您的 Stackblitz：Updated Stackblitz Demo

export class AppComponent  {

  @ViewChild(MatTable, { static: false }) matTable: MatTable<any>;

  ...

  deleteRow(index) {
     console.log('Delete row...');  
     (<FormArray>this.testForm.controls.radioButtons).removeAt(index);

     this.matTable.renderRows();   // Add this
  } 

}