Angular ngFor无法完整渲染全部数据问题求助

这问题我之前排查过类似的，结合你的代码和描述，给你几个大概率的排查方向：

1. 确认数组是否为稀疏数组或包含无效元素 #

你提到控制台打印data显示为Array(100)，但有可能这个数组是稀疏数组（即部分元素为empty或undefined）。ngFor在遍历的时候会自动跳过这些无效元素，看起来就像只渲染了部分数据。

你可以在subscribe里加一行代码验证：

this.route.data.subscribe(data => {
  console.log(data);
  // 打印数组中有效元素的数量
  console.log(data.filter(item => !!item).length);
  this.data = data;
});

如果这个数字是20，那说明API返回的数组里确实只有20个有效元素，剩下的都是空值，这时候要去检查API接口的返回数据是否正确。

2. 检查模板是否有隐藏元素的逻辑 #

会不会你的<li>标签被间接隐藏了？比如：

• 模板里加了*ngIf="d.title"，而部分数据的title为空或undefined，导致这些<li>不渲染
• CSS里设置了display: none、visibility: hidden，或者height: 0等样式隐藏了元素

你可以打开浏览器开发者工具的Elements面板，查看<ul>下面是不是真的只有20个<li>，还是有100个但大部分被隐藏了。

3. 验证Resolver返回的数据结构是否符合预期 #

虽然你说控制台打印的是Array(100)，但有没有可能是Resolver返回的是包含数组的对象，而你误把整个对象当成了数组？比如Resolver代码是这样的：

resolve(route: ActivatedRouteSnapshot): Observable<{ books: BooksData[] }> {
  return this.apiService.getBooks().pipe(map(res => ({ books: res })));
}

这时候你在组件里拿到的data是一个带books属性的对象，直接赋值给this.data后，ngFor遍历的是对象的属性而非数组。不过这种情况{{ data.length }}应该不会显示100，所以可能性较低，但还是可以仔细检查控制台打印的data结构。

4. 尝试用async管道简化逻辑 #

Angular中使用Resolver时，更推荐直接在模板里用async管道，避免手动订阅可能出现的隐性问题。你可以修改代码试试：

组件中注入ActivatedRoute：

constructor(public route: ActivatedRoute) {}

模板改为：

{{ (route.data | async).length }}
<ul>
  <li *ngFor="let d of (route.data | async)">{{ d.title }}</li>
</ul>

这种方式不需要手动订阅和赋值，Angular会自动处理数据流和变更检测。

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