ag-grid 单元格渲染器，显示来自多列的数据

Question

I'm trying to create a cell renderer that will take data from other columns.

For example, each row signifies some piece of data, and users should be able to open it depending on their permissions, and a restricted piece of data should be rendered differently than a non-restricted element. Other columns will have an affect on rendering this one column as well.

I would expect to be able to access the other columns' data using the path this.params.node.data.restricted , and this works during a click event, but I can't seem to have access to this data during the rendering phase of the component.

"columnDefs": [
    {
      "field": "id",
      "width": 40,
      "checkboxSelection": true
    },
    {
      "headerName": "Title",
      "field": "docTitle",
      "width": 1580,
      "cellRenderer": "detailViewRenderer"
    }
  ]

import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
  selector: 'detail-view-renderer',
  styles: [``],
  template: `
    <a class="restricted" *ngIf="params.node.data.restricted">{{params.value}}</a>
    <a class="not-restricted" *ngIf="!params.node.data.restricted">{{params.value}}</a>
  `
})
export class DetailViewRendererComponent implements ICellRendererAngularComp {
  public params: any;

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

  constructor() {}

  refresh(): boolean {
    return false;
  }
}

I think ideally, what I'd like to do is set the columns that will be passed into my renderer and access them in the component somehow as parameters. Is that possible or do we have some other workaround? I see Full Width Rows as an option, but that renders the entire row as one column.

Answer 1

I think you can access other row properties by using params.data.restricted , instead of params.node.data.restricted .

For example,

method() {
 const detailViewRenderer = params => {
   return `<span>${params.data.restricted}</span>`;
 };


 this.columnDefs: [
    {
      "field": "id",
      "width": 40,
      "checkboxSelection": true
    },
    {
      "headerName": "Title",
      "field": "docTitle",
      "width": 1580,
      "cellRenderer": "detailViewRenderer"
    }
 ]
}

Documentation

Answer 2

如果你还在寻找答案，你可以使用rowNode.columnApi.resetColumnState()