要在Angular 5中使用Ag Grid添加行,你可以按照以下步骤进行操作:
npm install --save ag-grid-community ag-grid-angular
import { AgGridModule } from 'ag-grid-angular';
@NgModule({
imports: [
AgGridModule.withComponents([])
],
// ...
})
export class YourModule { }
import { Component } from '@angular/core';
@Component({
selector: 'your-component',
templateUrl: 'your-component.html'
})
export class YourComponent {
rowData = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Bob', age: 30, city: 'London' },
// ...
];
columnDefs = [
{ headerName: 'Name', field: 'name' },
{ headerName: 'Age', field: 'age' },
{ headerName: 'City', field: 'city' },
// ...
];
onGridReady(params) {
params.api.sizeColumnsToFit();
}
}
addRow() {
this.rowData.push({ name: 'Alice', age: 28, city: 'Paris' });
this.gridApi.updateRowData({ add: [{ name: 'Alice', age: 28, city: 'Paris' }] });
}
在模板中添加一个按钮来调用该方法:
这样就可以在Ag Grid中动态添加行了。注意当添加行时,要同时更新rowData和通过gridApi调用updateRowData方法来更新Ag Grid的数据。