在ag-grid中顯示來自服務器的數據

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;
});

參考