Question

我正在尝试在ui-grid中动态添加新列，该列已出现在页面上。为此，我使用下面的代码在columnDefs数组中添加对象：

$scope.$on('SHOW_PROPERTY_SHEET_COLUMNS', (event, propertyObj:any) => {
    //this.selectDetailsPropertyColumn(propertyObj);
    let newColumn = {};
    let selProp = propertyObj.selectedProperty;
    let columnsLength = vm.gridApi.grid.options.columnDefs.length;
    let fieldName = `regular[0].${selProp.name}`;
    console.log('fieldName', fieldName);
    newColumn = { 
        displayName: selProp.displayName, 
        name: selProp.name, 
        field: selProp.name, 
        width: 100, 
        hidden:0,
        cellTemplate: propertyCellTpl(selProp.name), 
        visible: true, 
        enableColumnResizing: true
    };

    gridApi.grid.options.columnDefs.splice(parseInt(columnsLength-1), 0, newColumn);
    vm.summaryColumns.push(newColumn);
    vm.gridApi.grid.refresh();
});

对于cellTemplate，我们使用以下函数：

function propertyCellTpl(field){
    console.log('propertyCellTpl', field);
    return {{row.entity.regular[0].${field}}}>;
}

上面的代码将新列完美地添加到网格中，但没有显示各自列的值。任何人都可以帮助解决我面临的这个问题。

Answer 1

尝试将您的功能更改为此功能。返回值应该是HTML模板，因此它将是一个字符串值。例如，您可以cellTemplate: '<span>hi</span>'。

function propertyCellTpl(field){
    console.log('propertyCellTpl', field);
    return '{{row.entity.regular[0].field}}'>;
}

动态列以角度ui网格添加，但列值未显示

1 个答案: