带有 Mat-table 的 FormArray 在控制台中生成 ExpressionChangedAfterItHasBeenCheckedError

Question

我有一个 mat-table 可以显示 10 个日历，我想为此使用 formarray。我的 table 总是有 10 行，我想只使用 div，但使用 mattable 会用更少的代码。我的代码似乎可以正常工作，但我在加载时在控制台中看到了 ExpressionChangedAfterItHasBeenCheckedError。不知道如何解决。任何帮助。谢谢。

stackblitz for the code

HTML

      <table mat-table [dataSource]="dataSource" formArrayName="calenderArray">

        <!-- Choose Column -->
        <ng-container matColumnDef="position">          
          <td mat-cell *matCellDef="let element"> Closed Date {{element.position}} </td>
        </ng-container>

        <!-- Calender Column -->
        <ng-container matColumnDef="date">          
          <td mat-cell *matCellDef="let element; let rowIndex = index"  [formGroupName]="rowIndex"> 
            <mat-form-field>
              <input matInput formControlName="calender" [matDatepicker]="calender" placeholder="Choose a date">
              <mat-datepicker-toggle matSuffix [for]="calender"></mat-datepicker-toggle>
              <mat-datepicker #calender></mat-datepicker>
          </mat-form-field>  
          </td>
        </ng-container>

        <!-- Clear button -->
        <ng-container matColumnDef="clear">          
          <td mat-cell *matCellDef="let element; let index = index"> 
            <button type='button' tabindex="1" class="bell-def-button element" (click)='onClear(index)'>CLEAR</button>   
          </td>
        </ng-container>

        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

    </form>

打字稿

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms';



@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
  displayedColumns: string[] = ['position', 'date', 'clear'];

  calenderData = [
    { position: 1},
    { position: 2},
    { position: 3},
    { position: 4},
    { position: 5},
    { position: 6},
    { position: 7},
    { position: 8},
    { position: 9},
    { position: 10},
  ];

  dataSource = this.calenderData;


   holidayForm: FormGroup;
   constructor(private formBuilder : FormBuilder){}
  ngOnInit() {
    this.holidayForm = this.formBuilder.group({
      calenderArray: this.formBuilder.array([])
    });

    const userCtrl = this.holidayForm.get('calenderArray') as FormArray;
    this.dataSource.forEach((data) => {
      userCtrl.push(this.setCalenderFormArray(data));
    });

  }

    private setCalenderFormArray(data:any) {
    return this.formBuilder.group({
      calender: [data.position]
    });
  }

  onClear(i) {
    const arrayControl = this.holidayForm.get('calenderArray') as FormArray;
    arrayControl.at(i).reset();
  }

}

Answer 1

通过添加 changedetector 修复它。源代码如下。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms';



@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
  displayedColumns: string[] = ['position', 'date', 'clear'];

  calenderData = [
    { position: 1},
    { position: 2},
    { position: 3},
    { position: 4},
    { position: 5},
    { position: 6},
    { position: 7},
    { position: 8},
    { position: 9},
    { position: 10},
  ];

  dataSource = this.calenderData;


   holidayForm: FormGroup;
   constructor(private formBuilder : FormBuilder, private cdref: ChangeDetectorRef){}
  ngOnInit() {
    this.holidayForm = this.formBuilder.group({
      calenderArray: this.formBuilder.array([])
    });

    const userCtrl = this.holidayForm.get('calenderArray') as FormArray;
    this.dataSource.forEach((data) => {
      userCtrl.push(this.setCalenderFormArray(data));
    });

  }

    private setCalenderFormArray(data:any) {
    return this.formBuilder.group({
      calender: [data.position]
    });
  }

  onClear(i) {
    const arrayControl = this.holidayForm.get('calenderArray') as FormArray;
    arrayControl.at(i).reset();
  }
 ngAfterContentChecked() {
    this.cdref.detectChanges();
  }
}

带有 Mat-table 的 FormArray 在控制台中生成 ExpressionChangedAfterItHasBeenCheckedError

FormArray with Mat-table generating ExpressionChangedAfterItHasBeenCheckedError in console

angular-material

angular

formarray

mat-table