ExpressionChangedAfterItHasBeenCheckedError: выражение было изменено после его проверки. Предыдущее значение: 'undefined'

Ответ 1

ngAfterContentChecked жизненного цикла ngAfterContentChecked запускается, когда обновления привязок для дочерних компонентов/директив уже завершены. Но вы обновляете свойство, которое используется в качестве входного связывания для директивы ngClass. Это проблема. Когда Angular запускает этап проверки, он обнаруживает ожидающее обновление свойств и выдает ошибку.

Чтобы лучше понять ошибку, прочитайте эти две статьи:

• Все, что вам нужно знать об ошибке ExpressionChangedAfterItHasBeenCheckedError
• Все, что вам нужно знать об обнаружении изменений в Angular

Подумайте, почему вам нужно изменить свойство в ngAfterViewInit жизненного цикла ngAfterViewInit. Любой другой жизненный цикл, который запускается до ngAfterViewInit/Checked будет работать, например, ngOnInit или ngDoCheck или ngAfterContentChecked.

Таким образом, чтобы исправить это, переместите renderWidgetInsideWidgetContainer в ngOnInit() жизненного цикла ngOnInit().

Ответ 2

вы должны сообщить angular что вы обновили содержимое после ngAfterContentChecked вы можете импортировать ChangeDetectorRef из @angular/core и вызывать detectChanges

import {ChangeDetectorRef } from '@angular/core';

constructor( private cdref: ChangeDetectorRef ) {}


ngAfterContentChecked() {

this.sampleViewModel.DataContext = this.DataContext;
this.sampleViewModel.Position = this.Position;
this.cdref.detectChanges();

 }

Ответ 3

У меня возникла та же проблема, когда я пытался сделать что-то такое же, как и ты, и я исправил это с помощью чего-то похожего на ответ Ричи Фредиксона.

Когда вы запускаете createComponent(), он создается с неопределенными входными переменными. Затем после этого, когда вы присваиваете данные этим входным переменным, это меняет вещи и вызывает эту ошибку в вашем дочернем шаблоне (в моем случае это было потому, что я использовал ввод в ngIf, который изменился, когда я назначил входные данные).

Единственный способ избежать этого в данном конкретном случае - принудительное обнаружение изменений после назначения данных, однако я не делал этого в ngAfterContentChecked().

Ваш пример кода немного сложен, но если мое решение работает для вас, оно будет примерно таким (в родительском компоненте):

export class ParentComponent implements AfterViewInit {
  // I'm assuming you have a WidgetDirective.
  @ViewChild(WidgetDirective) widgetHost: WidgetDirective;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private changeDetector: ChangeDetectorRef
  ) {}

  ngAfterViewInit() {
    renderWidgetInsideWidgetContainer();
  }

  renderWidgetInsideWidgetContainer() {
    let component = this.storeFactory.getWidgetComponent(this.dataSource.ComponentName);
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
    let viewContainerRef = this.widgetHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    debugger;
    // This <IDataBind> type you are using here needs to be changed to be the component
    // type you used for the call to resolveComponentFactory() above (if it isn't already).
    // It tells it that this component instance if of that type and then it knows
    // that WidgetDataContext and WidgetPosition are @Inputs for it.
    (<IDataBind>componentRef.instance).WidgetDataContext = this.dataSource.DataContext;
    (<IDataBind>componentRef.instance).WidgetPosition = this.dataSource.Position;
    this.changeDetector.detectChanges();
  }
}

Мой почти такой же, как тот, за исключением того, что я использую @ViewChildren вместо @ViewChild, так как у меня есть несколько элементов хоста.

Ответ 4

Если вы используете <ng-content> с *ngIf вы обязательно *ngIf в этот цикл.

Единственный выход, который я нашел, это изменить *ngIf для display:none функциональности

Ответ 5

Два решения:

1. Убедитесь, что у вас есть некоторые переменные привязки, затем переместите этот код в settimeout ({}, 0);
2. Переместите связанный код в метод ngAfterViewInit

Ответ 6

setTimeout(() => { // your code here }, 0);

Я завернул свой код в setTimeout, и это сработало

Ответ 7

Я не понимаю, почему это произошло

Ответ 8

 ngAfterViewInit() {
   setTimeout(() => {
     this.renderWidgetInsideWidgetContainer();
   }, 0);
  }

Это хорошее решение для решения этой проблемы.