角4.4 - ExpressionChangedAfterItHasBeenCheckedError

Question

我已經減少了這最簡單的形式如下：

<select (change)="switch()" [hidden]="visible" [(ngModel)]="model"> 
    <option *ngFor="let amount of [1,2,3]" [ngValue]="amount"> {{amount}} </option> 
</select> 

<div [hidden]="!visible">... we swap places</div> 

---

export class SomeComponent { 

    model = 1; 
    visible = false; 

    switch() { 
    if (this.visible === 3) { 
    this.visible = true; 
    } 

} 

這似乎做工精細，但它也拋出：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

怎麼辦我在這裏檢查之前更改它？

Answer 1

您可以通過顯式觸發的變化處理這個問題，

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

constructor(private cdr: ChangeDetectorRef) {} 

switch() { 
    if (this.visible === 3) { 
     this.visible = true; 
     this.cdr.detectionChanges(); 
     ... 
}