Angular Ag-Grid：自定义单元格渲染器，可在行

Question

我在制作带有菜单的自定义单元格渲染器时遇到一些问题，该菜单可以一键编辑所有行。

首先，我要呈现菜单图标，在用户单击显示的下拉菜单后，我选择了“编辑”选项（不必理会删除选项）。好的，所以我在列的定义中有了单元格的可视外观：

columnsDefinition.push({
  headerName: '',
  cellRendererFramework: EditRendererComponent,
  cellRendererParams: {
    // params will be here
  }
});

好，让我们继续下一步。我需要一些额外的参数，我知道如何传递组件的静态参数，但我也需要来自渲染单元格的行中的数据-我不知道如何将其传递给自定义渲染器组件。

这是我的EditRendererComponent：

export class EditRendererComponent implements ICellRendererAngularComp {
  isEditing = false;
  params: any;

  agInit(params: ICellRendererParams) {
this.params = params;
  }

  refresh(params: any): boolean {
return false;
  }

editMode() {
// we need to loop thru all rows, find the column with the renderer, and 'cancel the edit mode'.
// otherwise, we will end up with rows that has SAVE buttons appearing but not in edit mode
const renderersInOtherRows = this.params.api.getCellRendererInstances(this.params);

if( renderersInOtherRows && renderersInOtherRows.length > 0 ) {
  for(const wrapper of renderersInOtherRows) {
    if (wrapper.getFrameworkComponentInstance() instanceof EditRendererComponent ) {
      const foundRenderer = wrapper.getFrameworkComponentInstance() as EditRendererComponent;
      if( foundRenderer.isEditing ) {
        foundRenderer.onCancel();
      }
    }
  }
}
this.isEditing = true;
this.params.api.startEditingCell( { rowIndex: this.params.node.rowIndex, colKey: 'some-col-field-name'});
}

onCancel() {
this.isEditing = false;
// restore previous data or reload
}
onSave() {
this.isEditing = false;
// do your saving logic
}
}

总结，我需要以下帮助：

1）将记录数据传递到渲染器组件

2）editMode()方法根本不起作用，是否有任何想法应解决如何使所有单元格都可编辑（仅当def editable列设置为true时）？

Answer 1

您无需通过cellRendererParams传递数据。在单元格渲染器组件内部，您可以使用参数访问行数据。

  agInit(params: any): void {
    this.params = params;
    data = params.data // access row data here
  }

如果您从文档中查看此example，则需要像示例一样实现按钮单击。在代码中使用它的方式应该可以解决问题。

您只需将[suppressClickEdit] = true添加到gridOption中，以便仅通过单击按钮即可激活编辑。通过将rowIndex传递给startEditing api，可以确保只有当前行可用于编辑。

您假设您点击editMode()就是单击“编辑”按钮，应该非常简单-

editMode() {
this.params.api.startEditingCell( { rowIndex: this.params.node.rowIndex, colKey: 'some-col-field-name'});
}