angular - ngIf - 检查后表达式已更改

Question

我有一个简单的方案，但就是无法正常工作!

在我看来，我在一个高度有限的框中显示了一些文本。

正从服务器获取文本，因此当文本进入时 View 会更新。

现在我有一个“展开”按钮，它有一个 ngIf，如果框中的文本溢出，应该显示该按钮。

问题在于，因为文本在获取时会发生变化，所以在 Angular 的变化检测完成后，“展开”按钮的状态变为 true...

所以我得到这个错误:Expression has changed after it was checked。先前的值:“假”。当前值:“真”。

很明显按钮没有显示...

看这个Plunker (检查控制台以查看错误...)

知道如何让它发挥作用吗？

Answer 1

发生此错误是因为您处于开发模式:

在开发模式中，变化检测会在每次常规变化检测运行后添加一个额外的轮次，以检查模型是否已更改。

因此，为了强制更改检测在下一个 tick 运行，我们可以这样做:

export class App implements AfterViewChecked {

  show = false; // add one more property

  constructor(private cdRef : ChangeDetectorRef) { // add ChangeDetectorRef
    //...
  }
  //...
  ngAfterViewChecked() {
    let show = this.isShowExpand();
    if (show != this.show) { // check if it change, tell CD update view
      this.show = show;
      this.cdRef.detectChanges();
    }
  }

  isShowExpand()
  {
    //...
  }
}

现场演示:https://plnkr.co/edit/UDMNhnGt3Slg8g5yeSNO?p=preview