Angular2 渲染后执行方法(Bootgrid)

Question

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

当数据在 Controller 中设置时，我尝试稍后初始化网格，但没有成功。我认为必须在 angular2 更新 DOM 之后初始化网格。有这样的“after component-dom update”事件吗？或者有什么其他的想法吗？

这是我的代码:

   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 接口(interface)来接收，这意味着您必须添加方法 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 之一.