ExpressionChangedAfterItHasBeenCheckedError: la expresión ha cambiado después de que se verificó. Valor anterior: 'indefinido'
Sé que hay muchas preguntas que ya se publicaron en stackoverflow y probé diferentes soluciones para evitar el error de tiempo de ejecución, pero ninguna de ellas no funciona para mí.
Código de 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 mediante DynamicComponentLoader
Después de mi resolución de problemas, he identificado un par de problemas
En primer lugar, este componente secundario 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 html de mi componente hijo como se muestra a continuación, obtengo el 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 de ciclo vital en el componente secundario