Angular - Ошибка при попытке визуализации пользовательского компонента Ag Grid - PullRequest
Новая
       73

Angular - Ошибка при попытке визуализации пользовательского компонента Ag Grid

0 голосов
/ 02 марта 2020

Таким образом, у меня есть 2 компонента, один из которых содержит фактическую сетку, а другой содержит диаграммы D3, компонент, в который я отображаю диаграмму, содержит нижеупомянутую функцию определения столбца сборки, компонент, которым я поделился, - это один который я пытаюсь визуализировать внутри ячейки Ag-grid.

Нажмите здесь , чтобы увидеть сообщение об ошибке на консоли при рендеринге пользовательского компонента в Ag-Grid.

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
         }

1 Ответ

0 голосов
/ 02 марта 2020

Когда вы реализуете настраиваемые компоненты визуализации ячеек для 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 .

...