數據綁定導致ExpressionChangedAfterItHasBeenCheckedError

我是Angular 4的新手。我有一個如下所示的數據綁定字段。但不知何故，有一個ExpressionChangedAfterItHasBeenCheckedError。數據綁定導致ExpressionChangedAfterItHasBeenCheckedError

<form> 
<div> 
    <h2>Hello {{input.value}}</h2> 
    <input type="text" [value]="input.value" name="inputTest"/> 
    <input type="text" #input [value]="name"/> 
</div> 
<button type="submit">submit</button> 
</form>

下面是一個簡單的構造：

export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
}

我讀了很多有關錯誤的帖子，我還是不明白，爲什麼一個簡單的數據綁定將導致錯誤。

我嘗試了下面的代碼，但不起作用。

ngAfterViewInit() { 
    console.log("ngAfterViewInit"); 
    this.cd.detectChanges(); 
}

請幫忙!!

請參考plunker：https://plnkr.co/edit/16atvKgf2BA6z2OjqT6h?p=preview

來源

2017-07-25 Aiden Zhao

這個帖子[所有你需要知道的關於'ExpressionChangedAfterItHasBeenCheckedError'錯誤]（https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-錯誤 - e3fd9ce7dbb4）應該給你的見解。如果沒有，創建一個重現問題並將其張貼在這裏的重擊器 –

@Maximus我添加了重擊器。我認爲代碼非常簡單，但會引發錯誤。 –

沒有錯誤引發你引用 –

作爲操作的Everything you need to know about change detection in Angular一個解釋，角執行是DOM更新。這包括插值和綁定更新。 Angular按照它們在模板中找到的順序爲每個DOM執行這些操作。這些操作在The mechanics of DOM updates in Angular中解釋。

您的模板看起來是這樣的：

<h2>Hello {{input.value}}</h2> 
    <input type="text" #input [value]="name"/>

所以角開始更新DOM和第一執行對h2元素的更新。它將{{input.value}}評估爲空字符串，因爲它尚未更新input上的value綁定。因此它將h2更新爲Hello並記住空字符串值。然後繼續更新input-[value]="name"的綁定，並將其值設置爲Angular! v4.3.1。變更檢測在此階段完成。

然後它運行驗證階段，如Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error中所述。在驗證階段，Angular評估{{input.value}}並將其與之前的值進行比較。由於輸入已經被處理，所以表達式求值爲Angular! v4.3.1，其與在變化檢測期間用於h2元素的空字符串不同。所以，你得到一個錯誤：

Expression has changed after it was checked. Previous value: ''. Current value: 'Angular! v4.3.1'.

這也意味着，如果您更改模板中的元素的順序，你會看到沒有錯誤。該工程確定：

<input type="text" #input [value]="name"/> 
<h2>Hello {{input.value}}</h2>

來源

2017-07-26 19:03:02

好吧一如既往地說！ – yurzui

@yurzui，感謝upvote） –

數據綁定導致ExpressionChangedAfterItHasBeenCheckedError

回答

相關問題