如何等到 ng2 完成对 DOM 的更改答案

【问题标题】：How to wait until ng2 will complete changing the DOM如何等到 ng2 完成对 DOM 的更改
【发布时间】：2016-09-28 06:37:39
【问题描述】：

我的网络应用程序中有打印功能。我正在使用 jquery 打印插件在打印预览中仅显示 dom 中的几个元素。我想确保仅在呈现所有数据后才开始打印。在当前的实现中 - 有时打印预览显示并非 dom 中的所有信息（我认为 ng2 使用某种延迟操作）。

看看样本：

@Component(...)
export class MyCoolComponent{|

myModel:MyModel;


print(){
   _myService.fetchDataSomehow().subscribe((newData:MyModel)=>{
       this.myModel = newData;
       // I need to wait until ng2 will adjust dom with new data in synchronous manner
       $(this._el).print();
   })
}
}

模板：

<div>
  {{myModel.field1}}
  {{myModel.field2}}
  {{myModel.field3}}
  //...and a lot of other fields from myModel
</div>

我知道我可以使用setTimeout(()=>{...}, 1)，但它看起来很傻。由于模型更改，是否有更可靠的方法等到角度 2 调整 dom？

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

checkout ngAfterViewChecked 在docs，也许这就是你要找的东西。

【讨论】：

我已经尝试过使用 ngAfterViewChecked，但每次更改 DOM 都会触发多次。但是我需要以某种方式跟踪最后一次更改何时应用于 DOM。
你知道有多少元素会做出改变吗？如果是这样，您可以添加会随着每个 ngAfterViewChecked 递增的计数器。如果计数器达到限制，一切都会解决。
@kit 如果我想在检查完每个视图后做某事怎么办？这很有挑战性，因为一切都会触发一个变化检测周期，所以我会陷入无限循环。

【解决方案2】：

另一种方法是将*ngIf 添加到您的html。

如果您想在myModel 中有值之前不渲染任何内容，请执行类似操作。

<div *ngIf="myModel">
  {{myModel.field1}}
  {{myModel.field2}}
  {{myModel.field3}}
</div>

这将检查myModel 是否有任何值。如果是，那么它将渲染。

您还可以在获取时添加“加载文本”，方法是检查 myModel 是否没有值并适当处理它

<div *ngIf="!myModel">
     Fetching Data...
</div>

【讨论】：

在我尝试打印页面的那一刻有一个数据。但它还没有渲染/部分渲染，所以我不确定 ngIf 在这种情况下会有什么帮助。