Angular 5 DevExtreme DataGrid小部件自定义列

时间:2018-10-31 14:20:26

标签: angular datagrid devextreme

我为专栏标题而苦恼。 我有一个其中定义了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);
}

在我的示例中,我看到了控制台中的更改,但是字幕仍具有标准值。

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

1 个答案:

答案 0 :(得分:0)

只需为dxi-column提供标题属性,如下所示:

dxi-column alignment =“ left” [allowFiltering] =“ false” dataField =“ budgetUsed” caption =“预算已使用”           [allowEditing] =“ false” [minWidth] =“ 400” cellTemplate =“ barTemplate”>