ngIf - 检查后表达式已更改

Question

我有一个简单的场景，但只是不能让它工作！

在我看来，我在一个高度有限的盒子里显示一些文字。

正在从服务器获取文本，因此视图会在文本进入时更新。

现在我有一个'expand'按钮，它有一个ngIf，如果框中的文字溢出，应该显示按钮。

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

所以我得到了这个错误：表达式在检查后发生了变化。上一个值：'false'。当前值：'true'。

显然按钮没有显示......

看到这个Plunker（检查控制台以查看错误...）

知道如何使这项工作？

Answer 1

发生此错误是因为你在dev mode：

在dev mode中，更改检测会在每次定期更改检测运行后添加额外的转弯，以检查模型是否已更改。

所以，要强制更改检测运行下一个滴答，我们可以这样做：

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

Answer 2

出于某种原因，@ Tiep Phan的回答对我来说不适用于强制更改检测，但使用setTimeout（这也强制更改检测）确实如此。

我也只需要将它添加到违规行，并且它与我在ngOnInit中已经拥有的代码一起工作得很好，而不必添加ngAfterViewInit。

例：

ngOnInit() {
    setTimeout(() => this.loadingService.loading = true);
    asyncFunctionCall().then(res => {
        this.loadingService.loading = false;
    })
}

更多细节在这里：https://github.com/angular/angular/issues/6005