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迭代col名称，以表示实际数据。（就像示例中一样）。

在打印{{column.name}}时，我看到每一列的键名，打印时：{{dataItem |我可以从中看到模型，我希望对[column.name]进行评估，我不确定为什么尝试同时使两个{{dataItem [column.name]}} 我什么都没收到，这是一个角度模板限制吗？有没有人设法做到这一点？我当前的col定义模型必须包含“类型”字段吗？

将感谢您的工作-非hackish-示例：）

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

        <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>

效果不好：（

我正在使用webpack和ngUpgrade配置运行angular 6，编译JIT，不涉及cli，也许编译器在进行双重评估时会遇到困难吗？ dataItem [column.field]

不确定该怎么办。

Answer 1

尝试以下代码：

<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>

Answer 2

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

如何使用列设置动态创建角度剑道网格列？

2 个答案: