如何在Ag-Grid中有条件地启用/禁用单元格渲染器？ [英] How to conditionally enable/disable cell renderer in Ag-Grid?

问题描述

我正在使用ag-grid单元格渲染器，并且为此创建了一个单独的组件。基于某些条件，我想有条件地使单元格渲染器组件启用或禁用。

I am using ag-grid cell renderer and I have created a separate component for it. Based on some condition, I want to conditionally make the cell renderer component enable or disable.

{
headerName：查找值，字段： LOOKUP '，可编辑：false，cellRenderer：'lookupRenderer'}

{ headerName: 'Look up values', field: 'LOOKUP', editable: false, cellRenderer:'lookupRenderer'}

我想根据条件启用/禁用 lookupRenderer。

I want to enable/disable 'lookupRenderer' based on conditions.

推荐答案

内联 cellRenderer 仅应用于简单情况。
要在自己的 cellRenderer 您需要为此创建组件。

Inline cellRenderer should be used only for simple cases. To achieve button-click handling inside own cellRenderer you need to create component for that.

您的组件将是这样的：

@Component({
    selector: 'custom-button-cell',
    template: `<button [disabled]="!params.node.data.enableButton" (click)="handleClick()">{{params.value}}</button>`,
    styles: [``]
})

export class ConditionalRenderer implements ICellRendererAngularComp {
    private params: any;

    agInit(params: any): void {
        this.params = params;
    }

    refresh(): boolean {
       return true;
    }

   handleClick() {
      alert(`Clicked: ${this.params.value}`);
   }
}

这里是工作过的plnkr

别忘了，您的 component 应该包含在 gridOptions 内的 frameworkComponents 中或作为 [frameworkComponents] html属性。

Don't forget, that your component should be included to frameworkComponents inside gridOptions or as [frameworkComponents] html attribute.

这篇关于如何在Ag-Grid中有条件地启用/禁用单元格渲染器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！