如何解决Kendo Grid Column用ngFor时数据取自field而非ngFor的问题？

嘿，这个问题我之前也踩过坑！Kendo Grid的列一旦设置了field属性，就会优先用默认逻辑渲染该字段的原始值，直接把你写的<li>循环内容给忽略了。要让自定义的ngFor内容正常显示，你得用Kendo Grid提供的自定义单元格模板功能，具体改法如下：

修复步骤 #

• 要么移除列上的field属性（避免和自定义模板冲突），要么保留但通过模板完全覆盖渲染逻辑；
• 使用<ng-template>配合kendoGridCellTemplate指令来定义单元格的自定义内容，这样就能在模板里自由使用*ngFor循环了。

修改后的代码示例 #

<kendo-grid-column 
  title="{{localizationKeys.adempimenti.organizzazione.responsabile}}"
>
  <ng-template kendoGridCellTemplate let-dataItem>
    <ul>
      <li *ngFor="let addetto of dataItem.addettiGrid; let i=index">
        <div>{{addetto}}</div>
      </li>
    </ul>
  </ng-template>
</kendo-grid-column>

关键说明 #

• let-dataItem是Kendo Grid模板的内置变量，代表当前行的完整数据对象，这样你就能通过dataItem.addettiGrid拿到要循环的数组；
• 把原来的<li>放在<ul>里（语义更规范，也避免布局混乱）；
• 如果你的addettiGrid字段需要作为列的排序/过滤依据，也可以保留field="addettiGrid"，模板依然会覆盖显示内容，不会影响排序过滤的逻辑。

内容的提问来源于stack exchange，提问作者Jacopo Sciampi