Angular 5 DevExtreme DataGrid小工具自定义列

Question

我为我的专栏的标题而苦苦挣扎。我有一个定义了Displayname的configurationObject，但我无法更改列的标题。

<div class="grid">
<dx-data-grid 
    #dataGrid 
    [columnAutoWidth]="true" 
    [dataSource]='machinery' 
    (onContentReady)='onContentReady($event)'
    (onToolbarPreparing)="onToolbarPreparing($event)" 
    [showBorders]="true" 
    (onRowClick)='rowClick($event)'
    (onEditorPreparing)='onEditorPreparing($event)' 
    [customizeColumns]='customizeColumns'> 
    <dxo-remote-operations 
        sorting="true" 
        paging="true" 
        filtering="true">
    </dxo-remote-operations>
    <dxo-paging [pageSize]="50"></dxo-paging>
    <dxo-scrolling mode="virtual" rowRenderingMode="virtual">
    </dxo-scrolling>
    <dxo-selection mode="single"></dxo-selection>
    <dxo-filter-row visible="true" applyFilter="auto">
    </dxo-filter-row>
    <dxi-column dataField="Company"></dxi-column>
    <dxi-column dataField="Sourcesystem"></dxi-column>
    <dxi-column dataField="Description"></dxi-column>
</dx-data-grid>

​

我的TS代码

@ViewChild('dataGrid')
_dataGrid: DxDataGridComponent;

ngAfterViewInit() {
    this._dataGrid.columns.forEach(col => {
        console.log('col', col);
        col.caption = 'dd';
    });
    console.log('this._dataGrid.columns', this._dataGrid.columns);
}

在我的示例中，我看到了控制台中的更改，但我的标题仍然具有标准值。

我做错了什么，或者是否有其他解决方案来更改列的标题。

Answer 1

只需为dxi-column指定一个标题属性，如下所示：

dxi-列alignment="left“allowFiltering="false”dataField="budgetUsed“caption="Budget Used”allowEditing="false“minWidth="400”cellTemplate="barTemplate">