显示多列数据的 ag-grid 单元格渲染器答案

【问题标题】：ag-grid cell renderer that shows data from multiple columns显示多列数据的 ag-grid 单元格渲染器
【发布时间】：2019-06-22 20:52:33
【问题描述】：

我正在尝试创建一个从其他列获取数据的单元格渲染器。

例如，每一行表示一些数据，用户应该能够根据他们的权限打开它，并且受限制的数据应该以不同于非限制元素的方式呈现。其他列也会对呈现这一列产生影响。

我希望能够使用路径this.params.node.data.restricted 访问其他列的数据，这在单击事件期间有效，但在组件的呈现阶段我似乎无法访问这些数据.

"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;
  }
}

我认为理想情况下，我想做的是设置将传递给我的渲染器的列，并以某种方式在组件中将它们作为参数访问。这是可能的还是我们有其他的解决方法？我将Full Width Rows 视为一个选项，但这会将整行呈现为一列。

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

我认为您可以使用params.data.restricted 而不是params.node.data.restricted 来访问其他行属性。

例如，

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

【讨论】：

我想我明白了。由于某种原因，行在数据可用之前进行了初始化，所以第一次渲染时，我得到一个空指针异常。添加一些基本的*ngIf="params && params.data" 阻止了让我正确访问数据的异常。
我所需要的只是 params.data 到达现场并且它起作用了。我只直接使用数据或值，但它不起作用。
也可以试试 ({data})
我也不认为 method() 是必要的。一个 const 就可以了。

【解决方案2】：

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

【讨论】：

列状态与我遇到的问题无关。我正在编写一个单元格渲染器组件，该组件使用来自多个问题的数据。列状态与每列的列定义更相关。