動態列添加角度ui網格，但列值不顯示

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}}'>; 
}