Angular2在渲染后执行方法（Bootgrid）

Question

我尝试将 jQuery Bootgrid 与 Angular 2 一起使用。 问题是 Bootgrid 检查现有表，但使用 angular2 我的数据基于异步源。

我稍后在控制器中设置数据但没有运气时尝试初始化网格。我认为必须在 Angular2 更新 DOM 之后初始化网格。有没有这样的“组件-dom更新后”事件？还是有其他想法？

这是我的代码：

   records: Record[] = []
   grid: any

    ngOnInit() {
        this._recordService.getAllRecords().subscribe(
            data=> { this.records = data },
            error=> { alert(error) }
        )
            .add(() => setTimeout(() => this.initGrid(), 50));
    }


    initGrid() {
        this.grid = jQuery("#grid-basic");
        var ref = this;
        this.grid.bootgrid({
          ...config Stuff...

        })
    }

这只会因为丑陋的“setTimeout”而起作用。如果没有超时，表格将显示“无数据”（我的记录计数的 bootgrid 信息标签已正确更新）

感谢您的任何想法！

Answer 1

有AfterViewChecked 事件，每次更新 DOM 时都会触发。这可以通过实现AfterViewChecked Typescript 接口来接收，这仅仅意味着您必须添加方法ngAfterViewChecked()。

ngOnInit() {
    this._recordService.getAllRecords().subscribe(
        data=> { this.records = data },
        error=> { alert(error) }
    )
}

ngAfterViewChecked() {
  if (this.records.length > 0 && !this.isGridInitialized) this.initGrid();
}

initGrid() {
    this.isGridInitialized = true;
    this.grid = jQuery("#grid-basic");

    var ref = this;
    this.grid.bootgrid({
      ...config Stuff...

    })
}

这是AfterViewChecked 的工作演示：http://plnkr.co/edit/Edkba0Stgn95Whwz4vqq?p=preview。这个demo展示了ngAfterViewChecked方法在Observable完成后调用（延迟5s）。

AfterViewChecked 是Angular2 lifecycle hooks 之一。

Answer 2

难道你不能把承诺包装在你的 initGrid 函数调用中

gridData.service.getData().then((data) => {
   initGrid(data);
});