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

Posted 2023-02-19

【中文标题】如何使用列设置动态创建角剑道网格列？

【英文标题】：How to dynamically create angular-kendo grid columns using columns settings?

【发布时间】：2019-06-16 09:01:21

【问题描述】：

我基于最新的文档： 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 | 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 以及何时获得？

【参考方案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>