Angular Grid组件v1.7+ Chrome下列头与列数据不匹配问题问询

听起来你遇到的是个典型的浏览器兼容类bug，而且和Kendo Grid内部的列渲染机制密切相关。我来帮你拆解下问题核心和可行的解决思路：

问题本质分析 #

升级到~1.7版本后，Chrome中列数≥11时出现列头与数据不匹配、首列锚点DOM跑到第二列的问题，但IE和Firefox完全正常。结合你发现的columns属性顺序正确、columnList顺序错乱的细节，根源在于：

• Kendo Grid在Chrome下构建内部列集合columnList时，没有严格遵循你定义的columndefinitions顺序，而IE/Firefox下则保持了和定义一致的顺序
• 你依赖*ngFor的first变量区分首列模板，当渲染顺序被打乱时，first标记的列和实际显示的列位置错位，直接导致锚点元素出现在错误的列上

可行的解决方法 #

1. 放弃依赖first变量，单独定义首列

把首列从*ngFor循环中抽出来单独编写，剩下的列再循环渲染。这样不管Grid内部怎么调整渲染顺序，首列的模板都绑定到你定义的第一列，彻底避免错位：

<!-- 单独渲染首列 -->
<kendo-grid-column [field]="columndefinitions[0].name">
  <ng-template kendoGridCellTemplate let-dataItem>
    <a class="cellanchor">{{dataItem[columndefinitions[0].name]}}</a>
  </ng-template>
</kendo-grid-column>

<!-- 循环渲染剩余列 -->
<kendo-grid-column *ngFor="let column of columndefinitions.slice(1)" [field]="column.name">
  <ng-template kendoGridCellTemplate let-dataItem>
    <span>{{dataItem[column.name]}}</span>
  </ng-template>
</kendo-grid-column>

2. 强制指定列的order属性

通过给每列绑定[order]属性，强制Grid按照你定义的顺序排列列，忽略内部columnList的异常顺序：

<kendo-grid-column 
  *ngFor="let column of columndefinitions; let i = index"
  [order]="i"
  [field]="column.name"
>
  <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
    <div>
      <a *ngIf="i === 0" class="cellanchor">{{dataItem[column.name]}}</a>
      <span *ngIf="i !== 0">{{dataItem[column.name]}}</span>
    </div>
  </ng-template>
</kendo-grid-column>

这里把first判断换成了索引i === 0，同时用[order]="i"强制列的显示顺序和定义顺序完全一致。

3. 升级Kendo Grid到更高版本

这个问题大概率是~1.7版本的Chrome专属兼容bug，后续版本的Kendo Angular Grid应该已经修复了这类浏览器特定的渲染问题。如果项目允许，建议升级到较新的稳定版本，从根源上解决问题。

为什么不同浏览器columnList顺序不同？ #

Chrome和IE/Firefox在DOM节点处理、组件初始化队列的执行顺序上存在细微差异。Kendo Grid ~1.7版本的内部列构建逻辑可能没有考虑到这些差异，导致在Chrome下列数较多时，columnList的生成顺序偏离了定义的columns顺序。而IE/Firefox的处理方式刚好和Grid的预期逻辑匹配，所以没有出现问题。

内容的提问来源于stack exchange，提问作者Todd Miranda