サーバからデータをグリッドで表示

Question

私はAngular 4プロジェクトでag-gridを使用しています。

サーバーからデータを取得してテーブルに表示しようとしましたが、データは存在しますが、テーブルは空のままです。

問題がどこにあるかを確認するために、同じデータを生成する*ngForがあり、画面に表示されていることがわかります。

手動で（ハードコードされて）書き込むと、グリッドにデータを表示することもできます。ページがロードされると、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-グリッドはデータが変更されたことを知らせる必要があります。 plunkerの作業

Answer 1

：代わりに、テンプレートにgridOptionsを渡すhttps://embed.plnkr.co/HJd1xI/

は、私は以下のように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