FormArray с Mat-таблицей, генерирующей ExpressionChangedAfterItHasBeenCheckedError в консоли

Question

У меня есть таблица матов, в которой будет отображаться 10 каландров, и я хотел бы использовать для этого форматирование. моя таблица всегда будет иметь 10 строк, я думал об использовании только с divs, но с mattable это будет с меньшим количеством кода. мой код, кажется, работает, но я вижу ExpressionChangedAfterItHasBeenCheckedError в консоли при его загрузке. не уверен, как решить это. любая помощь. спасибо.

стекблиц за код

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();
  }
}