要在Ag-Grid中使下拉列表和日期选择器正常工作,您需要使用单元格编辑器(cell editor)来自定义行内编辑的行为。以下是一个示例代码来解决这个问题:
首先,您需要创建一个自定义的单元格编辑器类,继承自Ag-Grid的ICellEditorAngularComp接口。在这个类中,您可以使用下拉列表或日期选择器来实现行内编辑。
import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';
@Component({
selector: 'app-custom-cell-editor',
template: `
`
})
export class CustomCellEditorComponent implements ICellEditorAngularComp {
private params: any;
public selectedValue: any;
public options: any[];
agInit(params: any): void {
this.params = params;
this.selectedValue = params.value;
this.options = params.options;
}
getValue(): any {
return this.selectedValue;
}
onCellValueChanged() {
// 通过调用stopEditing方法告诉Ag-Grid当前编辑已完成
this.params.api.stopEditing();
}
}
然后,在您的Ag-Grid组件中,您需要使用cellEditor属性将自定义的单元格编辑器类与相应的列绑定。例如,在columnDefs中的列定义中添加cellEditor属性:
columnDefs = [
{ headerName: 'Column 1', field: 'col1', cellEditor: 'customCellEditor' },
// 其他列定义...
];
最后,在Ag-Grid模块中注册自定义的单元格编辑器类:
import { NgModule } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { CustomCellEditorComponent } from './custom-cell-editor.component';
@NgModule({
declarations: [
CustomCellEditorComponent
],
imports: [
AgGridModule.withComponents([CustomCellEditorComponent])
]
})
export class AppModule { }
通过以上步骤,您可以在Ag-Grid中使用自定义的单元格编辑器来实现下拉列表和日期选择器的行内编辑功能。