角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(); 
     ... 
}