javascript - Angular 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。先前的值:“真”。当前值:'false'。

如何在此处检查之前更改它？

Answer 1

您可以通过显式触发更改来处理此问题，

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

constructor(private cdr: ChangeDetectorRef) {}

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