时间戳

首页 > 解决方案 > 如何在初始化 Angular-slickgrid 树时直接显示来自 Db 的数据，而不是在单击行标题之后

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

问题描述

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

我正在创建一个使用 angular-slickgrid Tree 的网络应用程序，以便显示数据库中的一些数据。创建树本身正在工作，我通过使用承诺从后端获取这些数据，因此从我的数据库中获取这些数据。为此，我特别扩展了 angular-slickgrid 的“示例 29：树数据（来自分层数据集）”。我的版本是 2.30.2，Angular 版本是 11.2.12，Typescript 是 4.1。

我的问题是，这些数据不会自动显示在树中，而是在我单击行标题之后......所以这些数据确实到达了前端！不幸的是，我找不到确切触发了哪个事件（在 Web 调试器和检查器中查看）。

有人说，实际上它应该通过将我的 db-data 提供给所谓的“datasetHierarchical”变量（在它们到达前端之后）来工作，因为 html '[datasetHierarchical]="datasetHierarchical"' 中有一个赋值。对于直接在 Tree-Component 中的模拟，这是可行的。但在我的情况下，对于来自数据库的数据，这并不像我尝试过的所有方法一样有效，例如“this.angularGrid.sortService.sortLocalGridByDefaultSortFieldId();” 或“this.angularGrid.gridService.invalidateHierarchicalDataset(this.datasetHierarchical);”，我认为应该在我的数据到达前端后重新渲染 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>

标签： typescriptangular-slickgrid

解决方案

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

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

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

推荐阅读