Angular 2 ngFor迭代次数超出预期问题求助

从你的描述来看，出现9个空div的核心原因大概率是你的items数组里存在9个无效元素（比如空对象、undefined，或是没有title这类可渲染属性的对象）。*ngFor会严格遍历数组的每一个元素——哪怕元素是空的，也会生成对应的div结构，只是因为没有可展示的内容，看起来就成了空div。

下面是具体的解决思路和方案：

1. 先确认数组实际内容 #

第一步先搞清楚items到底存了什么，在组件类里打印数组内容看看：

// 在组件.ts的初始化/数据获取逻辑里添加
console.log('当前items数组内容:', this.items);

如果输出显示数组长度确实是9，且多数元素是空对象或无有效属性，那问题根源就找到了。

2. 过滤无效元素 #

你可以通过两种方式过滤掉数组里的无效项，只保留能渲染出内容的元素：

方式一：在组件里预处理数组 #

在拿到items数据后，先过滤一遍再用于渲染：

// 比如在API请求成功后或数组初始化时
this.items = this.items.filter(item => {
  // 只保留有title且title不为空的元素
  return item && item.title && item.title.trim() !== '';
});

方式二：用自定义管道在模板过滤 #

Angular 2+移除了内置的filter管道，你可以自己写一个简单的过滤管道：

// 新建filter.pipe.ts文件
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'validItem' })
export class ValidItemPipe implements PipeTransform {
  transform(items: any[]): any[] {
    if (!items) return [];
    // 过滤逻辑和组件里的一致
    return items.filter(item => item && item.title && item.title.trim() !== '');
  }
}

记得在你的模块里声明这个管道，之后就能在模板里用了：

<div class="row">
  <div *ngFor="let item of items | validItem" class="col-sm-6 col-md-12">
    <!-- 你的card结构 -->
  </div>
</div>

3. 排查数据来源 #

如果items是从后端接口获取的，检查接口返回的数据格式是否符合预期——有没有可能后端返回了长度为9的空数组，或是前端解析数据时出了错（比如把字符串误解析成了数组）。

这样处理后，*ngFor就只会渲染数组里有效的元素，如果你预期只生成1个div，确保过滤后数组里只有1个有效元素即可。

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