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

Question

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

我有一个 angular 应用程序使用 ag-grid。它使用 cellRendererFramework 渲染列 a 的数据以显示在 table 中。我需要从 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 吗？

Answer 1

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

params.data.timestamp

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

Answer 2

您可以使用 CellRendererParams

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

然后您可以在 myCellRenderer

中使用 params.color 访问颜色

您可以阅读更多相关信息here

Answer 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>

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

Pass multiple values for cellRendererFramework using ag-grid?

ag-grid

angular

ag-grid-angular