在angular中设置ag-grid中下拉框的值可以通过以下步骤来完成:
npm install ag-grid-angular
import { Component } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
export class MyComponent {
rowData: any[];
columnDefs: any[];
frameworkComponents: any;
constructor() {
this.rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
this.columnDefs = [
{ headerName: 'Make', field: 'make', editable: true },
{ headerName: 'Model', field: 'model', editable: true },
{ headerName: 'Price', field: 'price', editable: true, cellEditor: 'agSelectCellEditor' }
];
this.frameworkComponents = {
agSelectCellEditor: CustomSelectCellEditorComponent
};
}
}
import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';
@Component({
selector: 'app-custom-select-cell-editor',
template: `
`
})
export class CustomSelectCellEditorComponent implements ICellEditorAngularComp {
private params: any;
selectedValue: any;
options: any[];
agInit(params: any): void {
this.params = params;
this.selectedValue = params.value;
this.options = ['Option 1', 'Option 2', 'Option 3'];
}
getValue(): any {
return this.selectedValue;
}
isPopup(): boolean {
return true;
}
focusIn(): void {}
focusOut(): void {}
}
以上代码示例中,我们通过设置columnDefs
数组中的cellEditor
属性为'agSelectCellEditor'
来指定使用自定义的下拉框组件。在自定义的下拉框组件中,我们通过实现ICellEditorAngularComp
接口来实现所需的功能,包括初始化时获取传入的参数、获取和设置选中的值等。
通过以上步骤,我们就可以在angular中设置ag-grid中下拉框的值了。