angular - 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”而起作用。如果没有超时，表格将显示“无数据”（我的记录计数的引导网格信息标签已正确更新）

感谢您的任何想法！

Answer 1

有一个AfterViewChecked事件，每次更新 DOM 时都会触发该事件。这可以通过实现AfterViewCheckedTypescript 接口来接收，这仅仅意味着您必须添加方法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 。此演示显示该ngAfterViewChecked方法在Observable完成后调用（延迟 5s）。

AfterViewChecked是Angular2 生命周期钩子之一。

Answer 2

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

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