如何在初始化 Angular-slickgrid 树时直接显示来自 Db 的数据,而不是仅在单击行 header 之后显示

How to show up data from Db directly when initializing Angular-slickgrid Tree instead of just after clicking on row header

我的第一个问题,如果我做错了什么,请接受我的道歉;-)

我正在创建一个 web-app,它使用 angular-slickgrid 树,所以显示一些来自数据库的数据。 创建树本身正在工作,我通过使用从后端并因此从我的数据库获取它们的承诺在前端获取这些数据。 为此,我特别扩展了 angular-slickgrid 的“示例 29:树数据(来自分层数据集)”。我的版本是 2.30.2,Angular 版本是 11.2.12 和 Typescript 4.1。

我的问题是,这些数据不会自动显示在树中,但在我单击该行后 header... 所以这些数据确实到达了前端! 不幸的是,我找不到确切触发了哪个事件(在网络调试器和检查器中查看)。

有人说,实际上只要将我的 db-data 赋给所谓的“datasetHierarchical”变量(在它们到达前端之后)就可以工作,因为 html 中有一个赋值'[datasetHierarchical]="datasetHierarchical"'。对于直接在 Tree-Component 中的模拟,这是可行的。 但是在我使用来自数据库的数据的情况下,这并不像我尝试的所有方法一样有效,比如 'this.angularGrid.sortService.sortLocalGridByDefaultSortFieldId();' 或 'this.angularGrid.gridService.invalidateHierarchicalDataset(this.datasetHierarchical);',我认为应该 re-render 在我之后的 Tree-Grid数据到达前端。

这样一件微不足道的事情不起作用,这有点令人沮丧,但也许其他人看到了我监督的(一个简单的)解决方案...... 所以提前感谢您的帮助! :-)

而且数据请求也很简单:

getDataFromDB(): Promise<Array<any>> {
    return this._host.get<any>("data").toPromise();
}

此外,我验证了数据是否真的到达了前端:是的,他们做到了!

ngOnInit(){
    this.defineGrid();
    this._service.getDataFromDB().
    then((data) => {
      if (data !== undefined && data !== null && data.length > 0) {
        this.datasetHierarchical = data; 
    }});
}

在我的 html 中:

<angular-slickgrid class="grid" gridId="grid29"
                    [columnDefinitions]="columnDefinitions"
                    [gridOptions]="gridOptions"
                    [datasetHierarchical]="datasetHierarchical"
                    (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

感谢您的帮助,但我在仔细查看库后找到了解决方案。 我猜超时不正常,所以我在数据从 DB 到达后添加了一个:

this.datasetHierarchical = data; 
setTimeout(() => {
this.angularGrid.sortService.sortLocalGridByDefaultSortFieldId();
},50);

现在,当我启动应用程序时,来自数据库的所有数据都会自动显示:-)