Question

我在Angular 4项目中使用ag-grid。

我从服务器中提取数据，然后尝试将其显示在表格中，但表格仍为空（尽管数据存在）。

为了确定问题所在，我有*ngFor生成相同的数据，我可以在屏幕上看到它。

我还设法在ag-grid中显示数据，如果我手动编写（硬编码）并在页面加载时解析它，而不需要任何ajax请求。

HTML：

<div style="width: 200px;">
  <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-fresh"
                   [gridOptions]="gridOptions">
  </ag-grid-angular>
</div>


<table class="table">
  <tr>
    <th>
      Foo
    </th>
    <th>
      Bar
    </th>
  </tr>
  <tr *ngFor="let item of gridOptions.rowData; let myIndex = index">
    <td>
      {{item.foo}}
    </td>
    <td>
      {{item.bar}}
    </td>
  </tr>
</table>

TS：

export class HomeComponent implements OnInit {
private gridOptions: GridOptions;

constructor(
  private adsService: AdsService
) {
  this.gridOptions = {};

  this.gridOptions.columnDefs = [
    {
      headerName: "Foo",
      field: "foo",
      width: 100
    },
    {
      headerName: "Bar",
      field: "bar",
      width: 100
    },
  ];

  this.gridOptions.rowData = [];
}

  ngOnInit(){
    this.myService
       .getAll()
       .subscribe(item => this.gridOptions.rowData = item);
  }
}

所以我可能需要以某种方式让ag-grid知道数据已经改变，我只是不知道该怎么做。

Answer 1

工作人员：https://embed.plnkr.co/HJd1xI/

我没有将 gridOptions 传递给模板，而是最终传递了分离的 columnRefs 和 rowData ，如下所示。

全宽renderer.component.html

<ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
             [gridOptions]="gridOptions"
             [columnDefs]="columnDefs"
             [rowData]="rowData">
</ag-grid-angular>

在组件上，我直接将值赋给rowData。

全宽renderer.component.ts

this.createRowData().subscribe((result) => {
    this.rowData = result;
});

Reference

在ag-grid中显示来自服务器的数据

1 个答案: