ag-grid-angular 怎么增加列

Ag-Grid是一个强大的数据表格组件库，用于Angular应用。要向ag-Grid添加列，你需要在Angular项目中配置列定义。以下是基本步骤：

1. 引入必要的模块：首先在你的`app.module.ts`或`app.component.ts`文件中导入`AgGridModule`和`AgGridAngular`。

import { AgGridModule } from 'ag-grid-angular';
// 如果你使用服务提供者
import { AgGridAngular } from 'ag-grid-angular/ag-grid-angular';

2. 创建列定义：定义一个数组，其中每个元素代表一个列，包含列名、字段名、类型等属性。例如：

import { ColumnDef } from 'ag-grid-community';

const columnDefs = [
  { field: 'id', headerName: 'ID', width: 50 },
  { field: 'name', headerName: '姓名', cellRenderer: 'myCustomCellRenderer' },
  // 更复杂的列定义...
];

这里`field`用于绑定数据源中的字段，`headerName`是显示在表头的文本，`cellRenderer`是自定义单元格渲染函数。

3. 将列定义传递给ag-Grid：在需要展示表格的地方，如`ag-grid-angular`的组件模板里设置列组：

<ag-grid-angular [rowData]="data" [columnDefs]="columnDefs"></ag-grid-angular>

这里的`rowData`是要显示的数据，`columnDefs`则是我们之前创建的列定义数组。