Question

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

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

这是我的代码：

   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的工作演示。此演示显示在ngAfterViewChecked完成后调用Observable方法（延迟5秒）。

AfterViewChecked是Angular2 lifecycle hooks之一。

Answer 2

难道你不能围绕你的initGrid函数调用

包装promise

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

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

2 个答案: