ReferenceError: customValueFormatter is not defined ag grid angular

Question

我在单独的 JSON 文件中有列定义，我正在尝试将值格式化程序添加到我的字段之一，我正在组件文件中定义值格式化程序函数，但我收到此错误“异常 = ReferenceError: customValueFormatter 未定义"

这是列定义JSON

[
  {
    "field": "parent",
    "rowGroup": true,
    "cellRenderer": "toolTipComponent",
    "flex": 1
  },
  {
    "field": "set",
    "rowGroup": true,
    "cellRenderer": "toolTipComponent",
    "flex": 1
  },
  {
    "field": "child",
    "rowGroup": true,
    "cellRenderer": "toolTipComponent",
    "flex": 1
  },
  {
    "field": "Item",
    "rowGroup": true,
    "cellRenderer": "toolTipComponent",
    "flex": 1
  },
  {
    "field": "factName",
    "pivot": true
  },
  {
    "headerName": "Value",
    "field": "value",
    "valueFormatter": "customValueFormatter",
    "cellRenderer": "labelComponent",
    "aggFunc": "customAggregateFunction",
    "flex": "1",
    "wrapText": true,
    "autoHeight": true
  }
]

这是我的组件文件

import { Component, Input, OnInit } from '@angular/core';
import { RightsScreenHttpService } from './services/rights-screen-http.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { SnackBarComponent } from '../../shared/snack-bar/snack-bar.component';
import { ToolTipComponent } from '../tool-tip/tool-tip.component';
import { LabelComponent } from '../../shared/label-generator';

const rightColumnDefs = require('../../../assets/rightsHeaderNames.json');

@Component({
  selector: 'app-rights-screen',
  templateUrl: './rights-screen.component.html',
  styleUrls: ['./rights-screen.component.scss']
})
export class RightsScreenComponent implements OnInit {
  gridApi: any;
  gridColumnApi: any;
  columnDefs: any[];
  defaultColDef: any;
  autoGroupColumnDef: any;
  rowData: any = [];
  isLoading: boolean;
  @Input() data: any;
  type: string;
  frameworkComponents: {
    toolTipComponent: any;
    labelComponent: any;
  };
  aggFuncs: any;
  getRowStyle: any;
  isRowDataEmpty: boolean;
  dummyColumnDefs: any;
  constructor(private _rightsService: RightsScreenHttpService, private _snakBar: MatSnackBar) {
    this.columnDefs = rightColumnDefs;
    this.dummyColumnDefs = rightsDummyHeaderNames;
    this.defaultColDef = {
      filter: true,
      resizable: true
    };
    this.autoGroupColumnDef = {
      minWidth: 280,
      cellRendererParams: {
        suppressCount: true
      }
    };
    this.frameworkComponents = {
      toolTipComponent: ToolTipComponent,
      labelComponent: LabelComponent
    };
  }

  ngOnInit() {
   
  }

  onGridReady(evt) {
    this.gridApi = evt.api;
    this.gridColumnApi = evt.columnApi;
    this.defaultColDef = { resizable: true };
    if (this.rowData.length === 0) {
      this.isRowDataEmpty = true;
    }
  }

  customValueFormatter(params){
    if (params.node.field === 'contentsetItem') {
      let childrenValues = [];
      let pivotKeys = params.colDef.pivotKeys;
      console.log(pivotKeys);
    }
  }

  onCellClicked(evt) {}

  onSelectionChanged(evt) {}

}

谁能告诉我哪里出错了

Answer 1

JSON 文件中的 "valueFormatter": "customValueFormatter" 条目仅将字符串 customValueFormatter 分配给 valueFormatter 属性。它没有像您希望的那样分配函数 customValueFormatter(params)。

要做到这一点，您必须在组件本地扩展 JSON 文件中的对象。

this.columnDefs = rightColumnDefs.map(col => 
  ({ ...col, valueFormatter: (params) => this.customValueFormatter(params) })
);

当然，这会将格式化程序添加到数组的每个对象。您可以使用三元运算符有条件地将格式化程序添加到数组的 select 个对象中。

this.columnDefs = rightColumnDefs.map(col => 
  // example (add formatter based on the `field` property)
  col['field'] === 'value'   
    ? ({ ...col, valueFormatter: (params) => this.customValueFormatter(params) })
    : col
);

ReferenceError: customValueFormatter is not defined ag grid angular

ReferenceError: customValueFormatter is not defined ag grid angular

ag-grid

angular

ag-grid-angular