ExpressionChangedAfterItHasBeenCheckedError：檢查後表達式已更改。以前的值：'undefined'

我知道在stackoverflow中已經發布了很多相同的問題，並嘗試了不同的解決方案來避免運行時錯誤，但是它們都不適用於我。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像下面我收到此相同error.Just添加一個角度動態加載ngclass屬性

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

</div>

我的數據綁定和一切工作都很好。我需要對父組件做任何事情嗎？我已經嘗試了子組件中的所有生命週期事件

來源

2017-08-02 JEMI

你怎麼加上'TestComponent'的內容？ –

@Maximus作爲條目組件 – JEMI

@Maximus我試着調用this.cdRef.detectChanges（）;明確但不起作用 – JEMI

當子組件/指令的綁定更新已完成時，將觸發ngAfterContentChecked生命週期掛鉤。但是您正在更新用作ngClass指令的綁定輸入的屬性。那就是問題所在。當Angular運行驗證階段時，它會檢測到有屬性的掛起更新並引發錯誤。

理解的錯誤較好，閱讀這兩篇文章：

想想爲什麼你需要更改ngAfterViewInit生命週期掛鉤的財產。在ngAfterViewInit/Checked之前觸發的任何其他生命週期都可以使用，例如ngOnInit或ngDoCheck或ngAfterContentChecked。

因此要修復它將renderWidgetInsideWidgetContainer移動到ngOnInit()生命週期掛鉤。

來源

2017-08-02 18:01:24

我已經嘗試過this.cd.detectChanges（），但不工作 – JEMI

你爲什麼更新在'ngAfterViewInit/Checked'的財產？ –

Actully它沒有更新我將我的輸入數據設置爲一個視圖模型，最後所有的屬性綁定通過這個模型像包裝類。當我直接綁定@Input datacontext時，我得到了同樣的錯誤。是有沒有解決方法，通過任何生命週期的擺脫這種錯誤的events.Let我嘗試ngAfterViewInit /在你的答案 – JEMI

你一定要告訴角度，你更新ngAfterContentChecked 後，可以從導入ChangeDetectorRef @角/核心，並呼籲detectChanges

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

constructor(private cdref: ChangeDetectorRef) {} 



ngAfterContentChecked() { 

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

    }

來源

2017-08-02 18:02:40

見我的意見的問題，我已經嘗試過這個解決方案，但仍然我得到同樣的錯誤 – JEMI

ExpressionChangedAfterItHasBeenCheckedError：檢查後表達式已更改。以前的值：'undefined'

回答

相關問題