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

【问题标题】：How to dynamically create angular-kendo grid columns using columns settings?如何使用列设置动态创建角剑道网格列？
【发布时间】：2019-06-16 09:01:21
【问题描述】：

<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 | json }} 我可以从中看到模型我希望对 [column.name] 进行评估，我不确定为什么在尝试同时显示 {{ dataItem[column.name] }} 我什么也没得到，是角度模板限制吗？有没有人设法做到这一点？我当前的 col 定义模型必须包含“类型”字段吗？

将欣赏任何工作 - 非黑客 - 示例:)

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

        <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，也许编译器很难进行双重评估？数据项[column.field]

不知道该怎么办..

【问题讨论】：

您能否提供一个可运行的示例（例如通过Stackblitz）来显示该行为？当我将 {{ dataItem[column.field] }} 添加到单元格模板到文档中的示例时，它工作得很好。
@Philipp - 感谢您的帮助，在基于 stackblitz 标准 cli 的项目中，它运行良好！但是在我的生产应用程序中它不起作用，即使我只是传递一个简单的列列表并执行：{{ dataItem [column }}，不幸的是我无法提供一个可以模拟我的环境的stackblitz（旧的角度6 有很多升级操作）
包含网格的组件的变更检测策略是什么？是OnPush吗？
@Shai - 我也检查了那个角度，它是 OnPush，我尝试了 Default，但没有奏效，组件 btw 从其父级获取绑定数据，所以它不是一个刻度
您从哪里获得dataItem 以及您从哪里获得elementsMeta 以及何时获得？

标签： angular kendo-ui-angular2

【解决方案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

【讨论】：

【解决方案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>

【讨论】：