ExpressionChangedAfterItHasBeenCheckedError: Вираз змінився після перевірки. Попереднє значення: 'undefined'

Я знаю, що є багато таких самих питань, які вже розміщені в переповненні стека, і я спробував різні рішення, щоб уникнути помилки під час виконання, але жодне з них не працює для мене.

Код компонента та HTML

export class TestComponent implements OnInit, AfterContentChecked {
    @Input() DataContext: any;
    @Input() Position: any;
    sampleViewModel: ISampleViewModel = { DataContext: : null, Position: null };
    constructor(private validationService: IValidationService, private modalService: NgbModal, private cdRef: ChangeDetectorRef) {
    }

    ngOnInit() {

    }
    ngAfterContentChecked() {

            debugger;
            this.sampleViewModel.DataContext = this.DataContext;
            this.sampleViewModel.Position = this.Position;

    }


<div class="container-fluid sample-wrapper text-center" [ngClass]="sampleViewModel.DataContext?.Style?.CustomCssClass +' samplewidget-'+ sampleViewModel.Position?.Columns + 'x' + sampleViewModel.Position?.Rows">
     //some other html here
</div>

Зверніть увагу: Цей компонент завантажується динамічно за допомогою DynamicComponentLoader

Після усунення несправностей я виявив кілька проблем

Перш за все цей дочірній компонент завантажується динамічно за допомогою DynamicComponentResolver і передаючи вхідні значення, як показано нижче

 ngAfterViewInit() {
    this.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;
    (<IDataBind>componentRef.instance).WidgetDataContext = this.dataSource.DataContext;
    (<IDataBind>componentRef.instance).WidgetPosition = this.dataSource.Position;

  }

Навіть якщо я змінив свій дочірній компонент html, як показано нижче, я отримую цю саму помилку. Просто додайте кутовий атрибут ngclass

<div class="container-fluid ds-iconwidget-wrapper text-center" [ngClass]="Sample">

</div>

Моя прив'язка даних і все працює нормально. Чи потрібно щось робити на батьківському компоненті? Я вже пробував усі життєві події в дочірньому компоненті

ngAfterContentCheckedЖиттєвий цикл гак спрацьовує , коли палітурки оновлення для дочірніх компонентів / директив були вже завершено. Але ви оновлюєте властивість, яка використовується як вхідний сигнал для ngClassдирективи. У цьому проблема. Коли Angular запускає етап перевірки, він виявляє, що очікується оновлення властивостей, і видає помилку.

Щоб краще зрозуміти помилку, прочитайте ці дві статті:

• Все, що вам потрібно знати про ExpressionChangedAfterItHasBeenCheckedErrorпомилку
• Все, що вам потрібно знати про виявлення змін у Angular

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

Отже, щоб виправити це, перейдіть renderWidgetInsideWidgetContainerна ngOnInit()гачок життєвого циклу.

Ви повинні повідомити, 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();

 }

Якщо ви використовуєте <ng-content>з *ngIfвами, ви обов'язково потрапите в цей цикл.

Єдиний вихід, який я знайшов, - це перехід *ngIfна display:noneфункціональність

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

Це хороше рішення для вирішення цієї проблеми.

Два рішення:

1. Переконайтеся, що у вас є деякі змінні прив'язки, перемістіть цей код до settimeout ({}, 0);
2. Перемістіть пов’язаний код у метод ngAfterViewInit

* NgIf може створити тут проблему, тому або використовуйте display none css, або простіший спосіб - використовувати [прихований] = "! Умова"

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

Я загорнув свій код у setTimeout, і це спрацювало

У мене були проблеми з.

ПОМИЛКА: ExpressionChangedAfterItHasBeenCheckedError: Вираз змінився після перевірки. Попереднє значення для 'mat-checkbox-checked': 'true'. Поточне значення: 'false'.

Проблема тут полягає в тому, що оновлене значення не виявляється до запуску наступного циклу виявлення змін.

Найпростішим рішенням є додавання стратегії виявлення змін. Додайте ці рядки до свого коду:

import { ChangeDetectionStrategy } from "@angular/core";  // import

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "abc",
  templateUrl: "./abc.html",
  styleUrls: ["./abc.css"],
})

У мене виникла та сама проблема, коли я намагався зробити щось подібне до вас, і я виправив це чимось подібним до відповіді Річі Фредсіксона.

Коли ви запускаєте 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, оскільки у мене є кілька елементів хоста.

Спробуйте це, щоб викликати свій код у ngOnInit ()

someMethod() // emitted method call from output
{
    // Your code 
}

ngOnInit(){
  someMethod(); // call here your error will be gone
}