时间戳

首页 > 解决方案 > ReferenceError：customValueFormatter 未定义 ag 网格角度

angular - ReferenceError：customValueFormatter 未定义 ag 网格角度

问题描述

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

}

谁能告诉我我在哪里犯了错误

标签： angularag-gridag-grid-angular

解决方案

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
);

推荐阅读