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

Question

使用 angular-6 中的最新农业网格。

我想根据 angular 服务的订阅数据在 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;
  });
}

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

请推荐。

谢谢

Answer 1

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

[rowData] = "rowData"

我现在可以看到数据了。

Answer 2

你应该使用异步管道：

[rowData] = "rowData | async"

仅当您的 rowData 是 Observable 时，例如：

populateGrid() {
 rowData = this.myService.getAllData(this.selectedId); // you should not subscribe it does async pipe for you implicitly 
}

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

Set and Change data in ag-grid

ag-grid

angular