可以通过以下步骤完成:
import { GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
gridApi: GridApi;
@ViewChild('agGrid') agGrid: AgGridAngular;
<ag-grid-angular #agGrid [rowData]="rowData" [columnDefs]="columnDefs" (gridReady)="onGridReady($event)"></ag-grid-angular>
onGridReady(params) {
this.gridApi = params.api;
}
this.gridApi.setRowData([]);
这将清除ag-grid中的所有数据。
完整的示例代码如下:
import { Component, ViewChild } from '@angular/core';
import { GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
@Component({
selector: 'app-grid',
template: `
<ag-grid-angular #agGrid [rowData]="rowData" [columnDefs]="columnDefs" (gridReady)="onGridReady($event)"></ag-grid-angular>
<button (click)="clearData()">清除数据</button>
`,
styles: []
})
export class GridComponent {
gridApi: GridApi;
@ViewChild('agGrid') agGrid: AgGridAngular;
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
];
columnDefs = [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
];
onGridReady(params) {
this.gridApi = params.api;
}
clearData() {
this.gridApi.setRowData([]);
}
}
这样,当点击"清除数据"按钮时,ag-grid中的数据将被清除。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云