Angular中使用*ngFor遍历TableColumn集合时如何避免遍历columnData属性

嘿，我来帮你排查这个问题！首先得明确一点：正常情况下，*ngFor="let column of tableColumns"只会遍历tableColumns数组里的每一个TableColumn实例，不会自动去遍历每个实例里的columnData属性。你遇到的这种情况，大概率是模板写法或者组件数据赋值出了问题，下面给你几个排查和解决方向：

1. 检查模板是否有不必要的嵌套*ngFor #

最常见的原因是你在模板里不小心给column.columnData也加了*ngFor。比如可能写了类似这样的代码：

<!-- 错误示例：嵌套了不必要的*ngFor -->
<div *ngFor="let column of tableColumns">
  <h3>{{ column.columnName }}</h3>
  <!-- 这里如果不需要遍历columnData，就删掉这个*ngFor -->
  <div *ngFor="let dataItem of column.columnData">
    <span>{{ dataItem }}</span>
  </div>
</div>

如果你的需求只是遍历tableColumns里的列配置，不需要处理columnData，那把内部针对column.columnData的*ngFor删掉就可以了。

2. 确认tableColumns数组的内容是否正确 #

检查组件里初始化或赋值tableColumns的代码，确保数组里只包含TableColumn的实例，没有混入columnData的元素。比如有没有类似这样的错误代码：

// 错误示例：把columnData的元素也添加到了tableColumns里
this.tableColumns = [
  new TableColumn('姓名', true, true, false, '', ['张三', '李四']),
  // 这里误把columnData的元素直接push进去了
  ...['张三', '李四']
];

这种情况下tableColumns数组里既有TableColumn对象，又有columnData的字符串元素，*ngFor自然会把所有元素都遍历出来。修正的话，确保tableColumns里只有new TableColumn(...)创建的实例。

3. 排查是否使用了keyvalue管道 #

如果你的模板里用了keyvalue管道来遍历column对象的属性，比如：

<!-- 错误示例：用keyvalue遍历了column的所有属性，包括columnData -->
<div *ngFor="let column of tableColumns">
  <div *ngFor="let prop of column | keyvalue">
    <span>{{ prop.key }}: {{ prop.value }}</span>
  </div>
</div>

这时候keyvalue管道会把column的所有属性（包括columnData）都遍历出来。如果只是想展示列的配置信息（比如columnName、isToFilter等），直接单独访问这些属性就好，不要用keyvalue管道遍历整个对象。

按照这几个方向排查，应该就能解决你的问题啦！

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