ag-grid buttonrenderer 每个按钮的非静态标签

Question

我正在尝试在 angular ag-grid

中实现一个按钮渲染器

所以我定义了一个列定义。问题是按钮的标签是静态的，无法更改。因此所有按钮都有相同的标签，但我想将单元格内容值 ('field from columndefs') 作为按钮的标签

这可能吗？如果是，有什么想法吗？

https://stackblitz.com/edit/angular-ag-grid-button-renderer?file=src/app/app.component.ts

Answer 1

我不确定，如果我答对了你的问题，但你可以将按钮渲染组件更改为如下内容：

<button type="button" (click)="onClick($event)">{{params.data.make}}</button>

Answer 2

button-rendered.component.ts
this.label = this.params.value|| null;

app.component.ts

columnDefs = [
    {
      headerName: 'Button Col 1',
      cellRenderer: 'buttonRenderer',
      field: 'make',
      cellRendererParams: {
        onClick: this.onBtnClick1.bind(this),
        label: 'Click 1'
      }
    },
    {
      headerName: 'Button Col 2',
      cellRenderer: 'buttonRenderer',
      field: 'model',
      cellRendererParams: {
        onClick: this.onBtnClick2.bind(this),
        label: 'Click 2'
      }
    },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

您还可以在呈现器中访问 params.data 中一行的数据，并编写逻辑以根据该行中的不同字段值显示标签

Answer 3

您需要更新按钮渲染器中的逻辑以根据 params.data 渲染标签，而不是从 colDefs.

获取硬编码值

在你的button-renderer.component.ts中改变lable逻辑如下

 agInit(params): void {
    this.params = params;
    debugger;
    this.label = params.data.make || null; // here use any property from params.data or write custom logic to populate label.
  }

stackblitz demo

Answer 4

您可以简单地使用 Ag-grid 的 valueGetter 方法。

我们可以根据字段值呈现特定列的值。请尝试像下面这样更改您的代码，

 columnDefs = [
    {
      headerName: 'Button Col 1',
      cellRenderer: 'buttonRenderer',
      valueGetter: (params) => this.displayColumnLabel(params.data.fieldName)
      cellRendererParams: {
        onClick: this.onBtnClick1.bind(this),
        label: 'Click 1'
      }
    },
   ...
   ];

  displayColumnLabel(fieldValue) {
    if(fieldValue) {
      return fieldValue; // do something you want to do with value (modifications)
    }
    return 'some default text or value';
  }

快乐编码..:)

ag-grid buttonrenderer 每个按钮的非静态标签

ag-grid buttonrenderer non-static label for each button

ag-grid

angular