时间戳

首页 > 解决方案 > 显示多列数据的 ag-grid 单元格渲染器

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

问题描述

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

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

我希望能够使用 path 访问其他列的数据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;
  }
}

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

标签： angularag-grid

解决方案

我认为您可以使用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"
    }
 ]
}

文档

推荐阅读