angular - formularios - ExpressionChangedAfterItHasBeenCheckedError: La expresión ha cambiado después de que se verificó. Valor anterior: ''indefinido''

ng src angular 4

Question

Sé que hay muchas de las mismas preguntas publicadas en stackoverflow e intenté diferentes soluciones para evitar el error de tiempo de ejecución, pero ninguna de ellas me funciona.

Código componente y 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>

Tenga en cuenta: este componente se carga dinámicamente usando DynamicComponentLoader

Después de mi resolución de problemas he identificado un par de problemas

En primer lugar, este componente hijo se carga dinámicamente utilizando DynamicComponentResolver y pasando los valores de entrada como se muestra a continuación

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

Incluso si cambié el componente html de mi hijo, como se muestra a continuación, obtengo este mismo error. Solo agregue un atributo angular ngclass

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

Mi enlace de datos y todo funcionan bien. ¿Debo hacer algo en el componente principal? Ya probé todos los eventos del ciclo de vida en el componente hijo

Answer 1

El gancho del ciclo de vida de ngAfterContentChecked se activa cuando ya se han finalizado las actualizaciones de enlaces para los componentes / directivas secundarios. Pero está actualizando la propiedad que se usa como entrada de enlace para la directiva ngClass . Ese es el problema. Cuando Angular ejecuta la etapa de validación, detecta que hay una actualización pendiente de las propiedades y arroja el error.

Para entender mejor el error, lea estos dos artículos:

• Todo lo que necesita saber sobre el error ExpressionChangedAfterItHasBeenCheckedError
• Todo lo que necesitas saber sobre detección de cambios en Angular.

Piense por qué necesita cambiar la propiedad en el gancho del ciclo de vida de ngAfterViewInit . Cualquier otro ciclo de vida que se desencadene antes de que ngAfterViewInit/Checked funcione, por ejemplo, ngOnInit o ngDoCheck o ngAfterContentChecked .

Así que para solucionarlo, mueva renderWidgetInsideWidgetContainer al gancho del ciclo de vida ngOnInit() .

Answer 2

Tiene que decirle a angular que actualizó el contenido después de ngAfterContentChecked , puede importar ChangeDetectorRef desde @angular/core y call detectChanges

import {ChangeDetectorRef } from ''@angular/core'';
constructor( private cdref: ChangeDetectorRef ) {}
ngAfterContentChecked() {
this.sampleViewModel.DataContext = this.DataContext;
this.sampleViewModel.Position = this.Position;
this.cdref.detectChanges();
}