具有简单类型行数据的 ag-grid答案

【问题标题】：ag-grid with simple type row data具有简单类型行数据的 ag-grid
【发布时间】：2019-01-16 11:22:15
【问题描述】：

我很难在 Angular 6.0 应用程序中设置 ag-grid 表，其中行数据模型是简单类型（日期、数字、字符串等）的数组

我可以这样做的唯一方法是将所有数据包装到一个对象列表中（每个对象包含一个属性）并将其作为行数据传递。这也意味着我必须在需要访问数据时手动系统地解包数据。

换句话说，有没有办法在 ag-grid 表中定义一个没有字段的 columnDef 并隐含地认为字段数据是整个行数据？

var gridOptions = {
    columnDefs: [
        {headerName: 'Athlete'}
    ],
    rowData: ['John', 'Oliver']
}

【问题讨论】：

如果您的数据如此简单，为什么还要使用第三方库？只需使用带有适当 css 的 html 表或 ul/li。
我也对 ag-grid 的渲染/排序/编辑功能感兴趣，所以在我的情况下，纯 html 是不够的。即使它是只读的，我更喜欢为整个 Angular 应用程序提供一致的表格外观和感觉，因为我以更标准和更复杂的方式使用 ag-grid。

标签： angular angular6 ag-grid ag-grid-ng2

【解决方案1】：

我认为字段是必需的，但 colId 不是必需的（它将默认为字段）。字段是将列映射到数据集的内容。以下是有关column definitions 的更多详细信息。

在初始化网格之前编辑数据可能更容易。这样的事情可能会奏效：

var data = ['John', 'Oliver'].map(name => {return {name} });
var gridOptions = {
    columnDefs: [
        {field:'name', headerName: 'Athlete'}
    ],
    rowData: data
}

【讨论】：

【解决方案2】：

你可以配置你的columnDefs

var gridOptions = {
    columnDefs: [
        {
            headerName: 'Athlete',
            valueGetter: (node) => node.data
        }
    ],
    rowData: ['John', 'Oliver']
}

【讨论】：