如何在 ag-Grid Angular 设置中访问 c​​olumnDefs 中另一列的值？

Posted 2023-03-28

【中文标题】如何在 ag-Grid Angular 设置中访问 c​​olumnDefs 中另一列的值？

【英文标题】：How to access the value of another column in the columnDefs in an ag-Grid Angular setup?

【发布时间】：2019-05-22 02:42:58

【问题描述】：

我有一个包含两列的 ag-Grid：一个 ID 列和一个描述列。 我在TypeScript类的ngOnInit()方法的columnDefs中构造了这两列的列定义。

在描述列中，我使用 cellRendererFramework 在我的 ag-Grid 中呈现 routerLink。 我使用 cellRendererParams 将一些必要的参数传递给我的 Angular 渲染器组件。 在Description 列中，我需要访问ID 列的ID 值，并将其放入cellRendererParams 参数'resourceId'。 我需要这个 ID 才能构建我的工作 RouterLink。

如何在下面的代码中做到这一点？

ngOnInit() 
  this.columnDefs = [

    // Column A - ID
     
        headerName: 'ID', 
        field: 'id', 
        width: 80, 
        sort: 'desc' 
    ,

    // Column B - Description
    
        headerName: 'Description',
        field: 'description',
        width: 150,
        cellRendererFramework: AgGridRouterLinkRendererComponent,
        cellRendererParams: 
            resourcePath: '/leverance/detail',
            resourceId: HERE-I-WOULD-LIKE-TO-ACCESS-THE-ID-VALUE-OF-THE-ID-FIELD-IN-THE-ID-COLUMN-ABOVE
    

  ];

【问题讨论】：

试试这个 - this.columnDefs[0].fieldId

在上面的代码中我这样写：resourceId: this.columnDefs[0].id 但是我得到一个错误：'TypeError: Cannot read property '0' of undefined.'

【参考方案1】：

我会这样定义 B 列：

// Column B - Description
      
        headerName: 'Description',
        field: 'description',
        width: 150,
        cellRendererFramework: AgGridRouterLinkRendererComponent,
        cellRendererParams(params) 
          return 
            resourcePath: '/leverance/detail',
            resourceId: params.data.id
          
        
      

这样你就可以得到其他列中的任何字段。

【讨论】：

cellRendererParams(params) return resourcePath: '/leverance/detail', resourceId: params.data.id 这有助于我获取数据。谢谢。

这实现了我想要的，虽然我使用的是 React，而且我还发现所有 params.data 无论如何都在传递，所以你可以使用组件中的任何数据字段，甚至不需要传递分开。

【参考方案2】：

我没有找到访问 columnDefs 中 ngOnInit() 中的 Id 值的方法。 相反，我可以在 AgRendererComponent 的 agInit() 方法中获取它。

agInit(params: any): void  this.resourceId = params.data.id; 

ag-grid-router-link-renderer.component.ts

import  Component  from '@angular/core';
import  AgRendererComponent  from 'ag-grid-angular';

@Component(
  template: `
    <a [routerLink]="[params.resourcePath, resourceId]">
      params.value
    </a>
  `
)
export class AgGridRouterLinkRendererComponent implements AgRendererComponent 
  params: any;
  resourceId: number;
  agInit(params: any): void 
    this.params = params;
    this.resourceId = params.data.id;
  
  refresh(params: any): boolean 
    return false;