jquery - Angular 2 : setTimeout for everything?

Question

我见过一些示例，其中代码将包装在 setTimeout 函数中，以避免在没有等待数据的情况下生成模板/组件。我想使用 jQuery bootstrap-multiselect 来显示组织列表。

ngOnInit(){
  this._panelService.getOrgs()
    .subscribe(
      orgs => this.orgs = orgs,
      error => alert('There was an error connecting to the API'),
      () => setTimeout(() => jQuery('#organizations').multiselect(), 0));
}

我也在其他地方使用过它。在本例中，我在删除后调用 API，以触发 *ngFor 中的更改:

deleteBoard(panelId: number, boardId: number) {
  this._boardService.deleteBoard(panelId, boardId)
    .subscribe(
      boards => this.panel.boards = boards,
      error => alert('There was an error contacting the API.'),
      () => setTimeout(this._boardService.getAvailableRanks(panelId)
        .subscribe(ranks => this.updatedRanks = ranks), 0));
}

*ngFor 不会检测到更改，除非我使用 setTimeout。我错过了什么？

我使用的是 beta 14。

Answer 1

如果该异步事件由 Zone.js 进行了猴子修补，则 Angular 更改检测将在每个异步事件之后自动运行。在更改检测期间，会检查 NgFor 绑定(bind)是否有更改，如果发现任何更改，则会更新 DOM。

我假设 deleteBoard() 使用某种异步事件，但该事件可能不是由 Zone.js 进行猴子修补的。 setTimeout() 是猴子补丁的，因此调用它会触发更改检测。

除了 setTimeout()，您还可以注入(inject) ChangeDetectorRef并调用其 detectChanges() 方法，该方法将检测该组件及其后代的更改。这是手动触发更改检测的另一种方法。

但是，这两种方法之间存在差异。使用setTimeout()，浏览器有机会在调用回调函数之前渲染 View 。有时你需要这个。使用 detectChanges()，更改检测会在浏览器有机会渲染 View 之前运行。如果可以的话，请使用 detectChanges()，因为它更高效(少执行一个更改检测周期)。