angular - 如何动态创建角度 ag-grids

Question

我正在根据从我必须创建API的响应收到的呼叫从呼叫中获取数据。让我们考虑下面的例子。APIag-grids

data = ["Usage","Audit"];

由于我在数组中有两个元素，我必须创建两个ag-grids，数据的元素可以变化，可以是 1，也可以是 10。谁能告诉我如何实现这一点

标签： angularangular8

Answer 1

只需在模板中迭代您的data响应。

我的组件.component.html

<div *ngFor="let gridName of data">
  <ag-grid-angular [rowData]="allData[gridName]"
                   [columnDefinitions]="allColumnDefinitions[gridName]">
  </ag-grid-angular>
</div>

我的组件.component.ts

export class MyComponent {
  data = ['One', 'Two'];
  allData = {
    One: [{first: '1'}, {first: '2'}, {first: '3'}],
    Two: [{other: 'A'}, {other: 'B'}, {other: 'C'}]
  }

  allColumnDefinitions: {
    One: [{field: 'first'}, {field: ''}],
    Two: [{field: 'other'}, {field: ''}]
  }
}