如何使用列设置动态创建angular-kendo网格列？

Question

我基于最新的文档：https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/

<kendo-grid [kendoGridBinding]="elements" ...some props>
           <kendo-grid-column *ngFor="let column of elementsMeta"
               field="{{column.name}}"
               title="{{column.name}}">
               <ng-template kendoGridCellTemplate let-dataItem>
                   <div>
                       {{ column.name }}
                       {{ dataItem[column.name] }}
                   </div>
               </ng-template>
           </kendo-grid-column>
</kendo-grid>

我有一个包含动态列名的元数据列表，我正在尝试根据angular-kendo API迭代列名称，以便表示实际数据。(就像在示例中一样)。

有没有人做到了？我当前的列定义模型必须包含一个'type‘字段吗？

将感谢任何有效的-非黑客-示例:)

顺便说一句，我还尝试了以下方法：

        <ng-container *ngFor="let column of elementsMeta">
            <kendo-grid-column  field="{{column.field}}"
                                title="{{column.title}}">
                <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem | json }} <br>
                {{ dataItem[column.field] }} <br>
                {{ column.field }}    
                </ng-template>
            </kendo-grid-column>
        </ng-container>

不会工作得很好:(

我运行的是angular 6，用的是webpack和ngUpgrade的配置，编译JIT，没有涉及cli，也许编译器在双重求值的时候遇到了困难？dataItemcolumn.field

不知道该怎么做..

Answer 1

HTML模板:

    <kendo-grid [data]="elements">
        <kendo-grid-column 
        *ngFor="let item of elementsMeta" 
        field="{{item.columnField}}" 
        title="{{item.columnTitle}}">
            <ng-template kendoGridCellTemplate let-dataItem>
                {{dataItem[item.columnField]}}
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

JSON :

this.elements = [{
    "ProductID": 1,
    "ProductName": "Chai",
    "UnitPrice": 18.0000
}, {
    "ProductID": 2,
    "ProductName": "Chang",
    "UnitPrice": 19.0000
}, {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "UnitPrice": 10.0000
}, {
    "ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning",
    "UnitPrice": 22.0000
}, {
    "ProductID": 5,
    "ProductName": "Chef Anton's Gumbo Mix",
    "UnitPrice": 21.3500
}];

this.elementsMeta = [{
    "columnField": "ProductID",
    "columnTitle": "ID",
},{
    "columnField": "ProductName",
    "columnTitle": "Name",
},{
    "columnField": "UnitPrice",
    "columnTitle": "Price",
}]

工作演示: https://stackblitz.com/edit/angular-ckztcy-s3vrhf

Answer 2

尝试使用以下代码：

<kendo-grid>
<kendo-grid-column *ngFor="let column of columns" [field]="column.field" [title]="column.title" [format]="column.format" [width]="column.width" [filter]="column.filter" [editable]="column.editable" [filterable]="column.filterable" [groupable]="column.groupable" [hidden]="column.hidden" 
[reorderable]="column.reorderable" [locked]="column.locked" >
    <div *ngIf="column.template && column.template !== ''">
        <ng-template kendoGridCellTemplate let-dataItem let-column="column">
            {{dataItem[column.field]}}
        </ng-template>
    </div>
</kendo-grid-column>
</kendo-grid>