时间戳

首页 > 解决方案 > ag-Grid：valueFormatter 异常

angular - ag-Grid：valueFormatter 异常

问题描述

我正在从通过 Web 服务接收的数据动态构建我的 ag-Grid 列（这是我正在构建列定义的代码片段；请参阅 plunker 以获取整个示例）： 

for (let i = 0; i < cr.attributes.length; i++) {

    let displayAlignment = '';
    switch (cr.attributes[i].dispAlign) {
        case 'C':
            displayAlignment = 'center';
            break;
        case 'L':
            displayAlignment = 'left';
            break;
        case 'R':
            displayAlignment = 'right';
            break;
        default:
            throw new Error('this will never happen, dispAlign for database must have value');
        }

    const displayMask = cr.attributes[i].dispMask;
    // console.log('displayMask: ', displayMask);
    const dataType = cr.attributes[i].dataType;
    // console.log('dataType: ', dataType);

    // console.log('cr attributes: ' , cr.attributes );
    childColDefsString = childColDefsString +
        '{"field": "' + cr.attributes[i].label + '"' +
        ', "cellStyle": {"textAlign": "' + displayAlignment + '"}' +
        ', "valueFormatter": "this.customValueFormatter(datatype, displayMask)"' +
        ', "width": 175, ' + '"hide": ' + cr.attributes[i].hide + '},';
}

在构建列时，我根据从 Web 服务接收到的列类型（按预期工作）添加了一个 cellStyle 用于列对齐。我还尝试添加一个 valueFormatter 来尝试调用自定义格式化程序。不幸的是，当 rowData 被应用（通过单击“应用行数据”按钮）到网格时，我遇到了以下 ag-Grid 抛出的异常（通过 Chrome -> Inspect -> 控制台查看）：

Processing of the expression failed ag-grid.js:10595 
Expression = customValueFormatter(datatype, displayMask) ag-grid.js:10596 
Exception = ReferenceError: customValueFormatter is not defined

这是我创建的 Plunker 示例的网址： https ://plnkr.co/edit/LcA5dRU9g8huLUWv3syZ?p=preview

我已经尝试过多次迭代 ag-Grid 示例https://www.ag-grid.com/javascript-grid-value-setters/，但无济于事。

标签： angularag-grid

解决方案

不完全确定您为什么使用stringinside进行操作buildAvailableFields。

parentColDefsString = parentColDefsString +
                    '{"headerName": "' + cr.label + '", ' +
                    '"children": [';

无论如何，这不是您面临的问题。

正是在你的情况下，你在这里有一个错误：

"valueFormatter": "this.customValueFormatter(datatype, displayMask)"'

在这里，您混合了输入属性并忘记了输入params值。如果你想为valueFormatter函数添加额外的输入参数，你应该把它包装成inner function

valueFormatter: (params) => this.customValueFormatter(params, datatype, displayMask);

-- 或者纯 JS

valueFormatter: function(params) {
    this.customValueFormatter(params, datatype, displayMask);
}

但在“字符串”连接的情况下，不会评估此函数。

下一个问题是：

为什么不使用标准结构进行操作，它会容易得多。

columnRequest.forEach(columnData=>{
    // your parent
    let column: ColDef={
        headerName: columnData.label,
        children:[]
    }
    // handle children
    column.attributes.forEach(childrenColumnData=>{
        let childrenColumn:ColDef={
            headerName: childrenColumnData.label,
            field: childrenColumnData.label
        }
        // condition for valueFormatter if it needed
        if(true){
            childrenColumn.valueFormatter = (params)=>this.customValueFormatter(params, yourAdditionalValue1, yourAdditionalValue2);
        }
    })
    this.colums.push(column);
}

推荐阅读