Угловой материал mat-selection-list генерирует ExpressionChangedAfterItHasBeenCheckedError при перезагрузке

Question

У меня вопрос по списку выбора матов и реактивным формам. Проблема в том, что я создаю список выбора матов, а затем после того, как я читаю из локального хранилища, я обновляю форму. Все работает, но я получаю ExpressionChangedAfterItHasBeenCheckedError, потому что он явно создан со значениями по умолчанию. Это ожидаемое поведение и как я могу это исправить, если оно:)

Вы можете увидеть пример стека блиц здесь:
https://stackblitz.com/edit/angular-ul58q4

Answer 1

эта ошибка вызвана тем, что вы установили начальное значение формы, но view не может его обнаружить, поэтому, используя changeDetectorRef после установки начального значения, оно будет правильным:

import { Component, AfterViewInit, Injectable ,ChangeDetectorRef } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { LocalStorageService } from './local-storage.service';

const FILTER_FORM_STORAGE_KEY = 'filterFormStorageKey';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  formGroup: FormGroup;
  typesControl: FormControl;

  types: any[] = [
    { id: 1, name: 'Type A' },
    { id: 2, name: 'Type B' }
  ];

  constructor(private _storage: LocalStorageService,
  private changeDetectorRef: ChangeDetectorRef) {
    this.formGroup = new FormGroup({
      typesControl: this.typesControl = new FormControl(null, [Validators.required])
    });
  }

  ngAfterViewInit(): void {
    const formStorage = this._storage.get(FILTER_FORM_STORAGE_KEY);
    if (formStorage) {
      this.formGroup.patchValue(formStorage);
    }
    this.changeDetectorRef.detectChanges();
  }

  saveForm() {
    console.log('submitted');
    this._storage.set(FILTER_FORM_STORAGE_KEY, this.formGroup.value);   
  }
}

работает ДЕМО .

Answer 2

Мы не можем просматривать исходный код в stackblitz. Проблема в том, что вы обновляете объект компонента после обновления DOM. Вам также нужно вручную активировать обнаружение изменений для обновления DOM. используйте

setTimeout(()=>{

}, 0);