angular - 如何将数组动态绑定到 ag-grid 列

Question

我正在研究 ag-grid 组件。在这个网格中，我必须只绑定垂直格式的列。假设我有一个数组 ["0.1", "0.4", "cn", "abc"]，我必须在 ag-grid 组件中显示它，如下所示，我没有任何 rowData。

    0.1
---------------------------------
    0.4
---------------------------------
    cn
---------------------------------
    abc
--------------------------------

是否可以使用 ag-grid 以垂直格式绑定上面的数组。或者是否有任何其他解决方案，请任何帮助将不胜感激。提前致谢。

我的html文件：

<ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

Answer 1

你可以试试：

export class MyGridApplicationComponent {
    public gridOptions: GridOptions;
    public myArray =  ["0.1", "0.4", "cn", "abc"] ;

    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
            {
                headerName: "",
                field: "value",
                width: 100
            }
        ];
        this.gridOptions.rowData = 
        this.myArray.map(function(item) {
  return {"value":item};
})
}
}

在html中：

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

演示