时间戳

首页 > 解决方案 > 在 ag-grid 中设置和更改数据

angular - 在 ag-grid 中设置和更改数据

问题描述

在 angular-6 中使用最新的 ag-grid。

我想从角度服务的订阅数据中设置 ag-grid 中的数据。服务的响应是这样的

{
  "summaryData": {
    "key1": "value1",
    "key2": "value2"
  },
  "tabularData": [
    {
      "fld1": "val1",
      "fld2": "val2"
    },
    {
      "fld1": "val3",
      "fld2": "val5"
    }
  ]
}

我想将其分配tabularData给 ag-grid。

我遵循了 ag-grid 的教程，但不知何故无法获取网格中显示的数据。

我尝试了以下

HTML：

<ag-grid-angular #agGrid 
style="width: 100%; height: 220px;" 
[enableColResize]="true" 
[animateRows]="true"
class="ag-theme-balham mt-8" 
[enableSorting]="true" 
[enableFilter]="true" 
[columnDefs]="columnDefs" 
[pagination]="true"
[rowData] = "rowData | async">

</ag-grid-angular>

TS：

populateGrid() {
 this.myService.getAllData(this.selectedId)
      .subscribe(
        response => {

    this.rowData = response.tabularData;
  });
}

Loading...即使从服务获取数据后，ag-grid 也会卡住（在 chrome 开发人员工具的网络选项卡中检查）

请建议。

谢谢

标签： angularag-grid

解决方案

正如@SiddAjmera 在评论中所建议的那样，我已经| async从我的视图中删除了管道：

[rowData] = "rowData"

我现在可以看到数据了。

推荐阅读