Angular - 尝试呈现自定义 Ag Grid 组件时出错

Question

所以我有 2 个组件，一个组件包含实际网格，另一个包含 D3 图表，我将图表呈现到其中的组件包含下面提到的构建列定义功能，我共享的组件是一个我试图在 Ag-grid 单元格内渲染。

在 Ag-Grid 中渲染自定义组件时，单击here 在控制台上查看错误消息。

Ag Grid Coldef：

// buildColumnDefinition functions returns the attributes needed by the grid
// -------In code i am mapping a model in column definition------------

private buildColumnDefinition(columnModel: ColumnModel): ColDef {
  return {
    headerName: columnModel.name,
    field: columnModel.accessor,
    sort: columnModel.sort,
    filter: columnModel.filter,
    cellRendererFramework: columnModel.componentRenderer
};

自定义单元格渲染器组件：

        //Below is the code in the component i am trying to render----//
        import { Component, OnInit } from '@angular/core';
        import * as d3 from 'd3';
        @Component({
          selector: 'app-bar-chart',
          templateUrl: './bar-chart.component.html',
          styleUrls: ['./bar-chart.component.scss']
        })// Bar chart component is the one rendered in the cell redenderer
        export class BarChartComponent implements OnInit {

          constructor() { }

          ngOnInit(): void {
         this.createChart();// Creating chart here
          }

          randomIntFromInterval(min, max) { // min and max included
            return Math.floor(Math.random() * (max - min + 1) + min);//Generates random number for my charts 
          }
    //Function that creates bar charts
          createChart() {
            const random = this.randomIntFromInterval(10, 100);//Call random number generator
            const w = 100;//setting width
            const h = 30; // setting height of region
            const padding = 1; //setting padding
            const dataset = [random]; // each time new random  value is passed
            const svg = d3.selectAll('#mychart').attr('width', w).attr('height', h); //selecting svg in html to bind the attributes
            const nodes = svg.selectAll('.rect').data(dataset)
           .enter()
           .append('g')
           .classed('rect', true);
            nodes.append('rect')//appending rect
           .attr('x', () => 0)//setting x coordinate
           .attr('y', (d, i) => i * (h / dataset.length)) //setting y coordinate
           .attr('height', () => 20) //setting height of bar chart
           .attr('width', (d) => d + '%') //setting width of bar chart
           .attr('fill', () => '#169bd5'); //filling color
            nodes.append('rect') //appending 2nd rectangle
           .attr('x', (d) => d + '%') //binding data to 'x' axis
           .attr('y', (d, i) => i * (h / dataset.length)) //binding the data to y axis
           .attr('height', () => 20)//setting the height pf bar chart
           .attr('width', (d) => (100 - d) + '%') //setting width of chart
           .attr('fill', () => '#FFFFFF'); //filling white color
         }

Answer 1

当您为 AgGrid 实现自定义单元格渲染器组件时，它期望您的组件实现某些与 AgGrid 相关的渲染方法。 ICellRendererAngularComp 是您在为 AgGrid 创建自定义单元组件时必须实现的接口。这迫使您声明和定义两个方法，即agInit() 和refresh()。

所以你的自定义组件应该如下所示：

// ... other import statements ...
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

export class BarChartComponent implements OnInit, ICellRendererAngularComp {
  refresh(params: any): boolean {
    // Mandatory - Get the cell to refresh. Return true if the refresh succeeded, otherwise return false.
    // If you return false, the grid will remove the component from the DOM and create
    // a new component in it's place with the new values.

    return false;
  }

  agInit(params: ICellRendererParams) {
    /**
    * this agInit method is called after ngOnInit when AgGrid renders this component
    * params object provides agGrid related info for this column
    */

    // Perform AgGrid related initialization if any or leave it blank
  }

  // ... rest of your component code ...
}

现在您的自定义渲染器组件可以正常工作。

有关 Angular 的自定义单元格渲染器组件的更多信息，请参阅 Ag-Grid docs。