angular - 材料表格的材料表（使用材料滑块）不起作用

Question

我正在尝试添加一个材料表，其中材料表的所有行都可以一次更新（一个常见的保存按钮）

为此，我尝试使用 FormArray 来存储表的所有数据，然后将数据数组发送回服务器以进行更新。

但我无法让材质滑块/FormArray 工作。

HTML如下

<form [formGroup]="legalStructureForm" >
  <ng-container formArrayName="legalStructureRatingScoreArray" >
    <mat-table [dataSource]="legalStructureResults" class="mat-elevation-z8">

     <mat-header-row *matHeaderRowDef="legalStructureColumns"></mat-header-row>
     <mat-row *matRowDef="let row; let index = index; columns: legalStructureColumns;" [formGroupName]="index"></mat-row>

     <!-- Name Column -->
     <ng-container matColumnDef="legalStructure">
      <mat-header-cell *matHeaderCellDef> {{l('LegalStructure')}} </mat-header-cell>
      <mat-cell *matCellDef="let record"> {{record.legalStructure.name}} </mat-cell>
     </ng-container>

     <!-- Icon Column -->
     <ng-container matColumnDef="ratingScore">
      <mat-header-cell *matHeaderCellDef> {{l('RatingScore')}} </mat-header-cell>
      <mat-cell *matCellDef="let record"> {{record.ratingScore}} </mat-cell>
     </ng-container>

     <!-- Actions -->
     <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let record; let index = index" [formGroupName]="index">
      <mat-slider formControlName="ratingScore" [value]="record.ratingScore" min="1" max="5" step="1"></mat-slider>
      </mat-cell>
     </ng-container>

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

组件如下：

    @ViewChild('dataTable') dataTable: Table;
     public legalStructureColumns = ['legalStructure', 'ratingScore', 'actions'];
     public legalStructureResults = new MatTableDataSource();

    // public legalStructureRatingScoreArray: FormArray;
    public legalStructureForm: FormGroup;

    constructor(injector: Injector, public legalStructuresService: LegalStructuresService, private formBuilder: FormBuilder) {
    super(injector);
  }

    ngOnInit() {
      this.legalStructureForm = this.formBuilder.group({
        legalStructureRatingScoreArray: this.formBuilder.array([])
    });

    this.legalStructureRatingScoreArray.push(this.formBuilder.group({
      ratingScore: new FormControl('', [ Validators.required]),
    }));
   }

    get legalStructureRatingScoreArray() {
      return this.legalStructureForm.get('legalStructureRatingScoreArray') as FormArray;
  }

    ngAfterViewInit() {

    this.getLegalStructures();

    // console.log(this.legalStructureForm);
  }

    public getLegalStructures(): void {
      this.legalStructuresService.getLegalStructureRatingScores()
      .subscribe(result => {
        this.legalStructureResults.data = result.items;
        result.items.forEach((obj) => {
          this.legalStructureRatingScoreArray.push(this.formBuilder.group({
          ratingScore: obj.ratingScore
        }));
      });
    });
  }

标签： angularangular-material