使用 ag-grid 为 cellRendererFramework 传递多个值？答案

【问题标题】：Pass multiple values for cellRendererFramework using ag-grid?使用 ag-grid 为 cellRendererFramework 传递多个值？
【发布时间】：2020-07-12 09:11:17
【问题描述】：

我只看到一个与此相关的 SO 问题，并且没有发布任何答案。

我有一个角度应用程序 usnig ag-grid。它使用 cellRendererFramework 为要在表格中显示的列 a 呈现数据。我需要从 Date 列中获取数据以正确格式化 Data 列，但找不到任何方法将其输入渲染器组件。这是基本代码：

  // Columns defined inside the main component
  this.columnDefs = [
    { headerName: 'Date', field: 'timestamp'},
    { headerName: 'Data',
      field: 'type',
      cellRendererFramework: MyRendererComponent,
    },
  }


  // Inside the renderer component
  export class MyRendererComponent implements OnInit {
    myData: any;

    agInit(params: import("ag-grid-community").ICellRendererParams): void {

      // This is where I need data from the first column to 
      // properly set the return value
      this.myData = this.setUpData(params.value)
    }

  setUpData(data: any) {
    // Operate on the data here, but I need the timestamp to do it properly
  }
  ...
  }

有没有人建议我如何将 timestamp 数据放入 MyRendererComponent？

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

找到了答案。使用 params 的 data 参数访问行数据并访问该数据上的字段：

params.data.timestamp

https://www.ag-grid.com/javascript-grid-cell-rendering-components/#cell-renderers-and-row-groups

【讨论】：

【解决方案2】：

你可以使用CellRendererParams来做到这一点

colDef.cellRenderer = myCellRenderer;
colDef.cellRendererParams = {
    color: 'guinnessBlack'
}

然后您可以在myCellRenderer 中使用params.color 访问颜色

您可以阅读更多关于它的信息here

【讨论】：

感谢 Ghanima 的评论，但我已经通过使用我的回答回复中指示的 params 对象的数据字段找到了它。直到现在我都无法接受作为答案。

【解决方案3】：

您应该使用 cellRendererParams 示例发送数据：

{
            cellRendererFramework: 'CityCellRenderer',
            cellRendererParams: {currentApartament: this.apartament},
            
          },

你可以这样获取数据：

<template>
  <div>
    <v-btn text icon @click="btnClickedHandler()">
      <v-icon>mdi-delete-outline</v-icon>
    </v-btn>
  </div>
</template>
<script>
  export default {
    name: 'CityCellRenderer',
    methods: {
      btnClickedHandler() {
        console.log(this.params) //please you check the properties.
      },
    },
  }
</script>

【讨论】：

我正在尝试做类似的事情，但想从行本身发送数据，例如：cellRendererParams: { label: currentRowData.myField + currentRowData.myOtherField } 不确定如何从 cellRendererParams 中访问行数据。
@HisDivineShadow 您可以查看此 console.log(this.params) //请检查属性。那里有你的价值观
我实际上发布了 this 问题，在那里我得到了一个可以用来找到解决方案的答案。