渲染角度分量

Question

我有一个显示某些信息的Angular组件（出于本方案的目的）。在我的typesript组件中，我有一个获取要显示的新数据的函数。 为了解决这个问题，假设除非我重新渲染组件，否则组件无法渲染新信息。这时我正在使用setTimeout（）这样进行操作：

updateData(){
  this.data=this.dataService.getData();
  this.showComponent=false;
  setTimeout(()=>{this.showComponent=true;},1);

}

这样，我确定我的组件将被重新渲染。 我知道这是解决问题的一种很愚蠢的方法。 我该如何做得更好？

Answer 1

dataService.getData()应该返回您所订阅的Observable。然后将showComponent设置为true。

类似这样的东西：

this.dataService.getData(
    (data) => {
        this.data = data;
        this.showComponent = true;
    }
);

Answer 2

ChangeDetectorRef doc

Angular Change检测是在诸如DOM事件，http请求等异步操作上触发的。因此，如果您同步更新值，则变更检测引擎可能会错过这些更改。

因此，有两种方法可以解决此问题：像您一样运行setTimeout或ChangeDetectorRef.markForCheck()标记组件以在下一个摘要循环中进行更新，或者ChangeDetectorRef.detectCahnges()立即运行检查。