ReferenceError：customValueFormatter 未定义 ag 网格角度答案

【问题标题】：ReferenceError: customValueFormatter is not defined ag grid angularReferenceError：customValueFormatter 未定义 ag 网格角度
【发布时间】：2021-09-23 02:43:50
【问题描述】：

我在一个单独的 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) {}

}

谁能告诉我哪里出错了

【问题讨论】：

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

【解决方案1】：

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

为此，您必须在组件中本地扩展 JSON 文件中的对象。

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

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

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

【讨论】：