如何从cellRender自定义组件调用api.stopEditing(true)来通知ag网格组件

Question

我已经为CheckBox渲染创建了一个自定义组件类，从那里我想通知父类发生了单元格编辑，需要调用api.stopEditing(true);，但它永远不会被调用，请检查下面的代码。

自定义CheckBox的渲染类：

export class AgGridCheckboxComponent implements ICellRendererAngularComp {
private params: any;
checked: boolean = false;
agInit(params: any): void {
this.params = params;
this.checked = this.params.value === "Approved";
}
// demonstrates how you can do "inline" editing of a cell
onChange(checked: boolean) {
// console.log("CheckBox value:",this.params.value)
this.checked = checked;
this.params.node.setDataValue(this.params.colDef, this.checked ? "Approved" : "");
this.params.value = this.checked ? "Approved" : "";
if (this.params.eGridCell) {
this.params.eGridCell.focus();
}
this.params.api.stopEditing(true);
}
refresh(params: any): boolean {
return true;
}
}

上面的this.params.api.stopEditing(true);行从未通知我的父类，在那里我添加了stopEditing的监听器。

我在父类中的侦听器：

onCellEditingStopped: function (event) {
console.log('onCellEditingStopped',event);
self.updateProductValue(event.value,event.rowIndex,event.colDef.field);
}

帮助我从自定义类手动调用stopEditing(true)。

提前感谢！

Answer 1

如果您想让子组件将子组件中发生的事情通知其父组件，您必须使用@Output：
首先在子组件中声明一个属性，如：

@Output() stopEdit = new EventEmitter();

然后你再次从你想要的子组件内部激发事件，我相信你想在onChange内部激发它，就像这样：

onChange(checked: boolean) {
// your code
this.stopEdit.emit(true);
}

最后，您在父组件中收听事件

<ag-grid-checkbox (stopEdit)="onCellEditingStopped($event)"></ag-grid-checkbox>

Answer 2

对于复选框，onCellValueChange在更改时不会被激发。但是您可以尝试使用onCellClicked来通知父项，并检查它是否为复选框列。你可以做这样的事情-

onCellClicked:(event) => {
if(event.colDef.field === 'cbox'){
self.updateProductValue(event.value,event.rowIndex,event.colDef.field);
}
}