Angular5中*ngFor无法渲染API数据但无报错的问题求助

我之前也碰到过一模一样的坑！能拿到数据但*ngFor死活不渲染，这种情况大多是绑定细节或者异步处理的小疏漏，咱们一步步排查：

Angular模板只能访问组件里的public变量（Angular 12+默认是public，但如果手动设成private就凉了）。比如：

// 错误示范：private变量模板根本拿不到
private heroes: Hero[] = [];

// 正确写法：用public（或者省略，默认就是public）
public heroes: Hero[] = [];

另外要确认模板里的变量名和组件里的完全一致，别组件里叫heroes，模板里写成heroList了！

API请求是异步的，你console.log能看到数据，大概率是数据回来的时候模板已经渲染完了，这时候得确保数据更新能触发Angular的变更检测：

// 错误示范：直接把Observable丢给变量，模板没加async管道
heroes$ = this.heroService.getHeroes();
// 模板如果这么写就白搭：<div *ngFor="let hero of heroes$">{{hero.name}}</div>

// 正确做法1：用async管道让模板自动处理异步
// 模板改成：<div *ngFor="let hero of heroes$ | async">{{hero.name}}</div>

// 正确做法2：在subscribe里手动赋值给数组
this.heroService.getHeroes().subscribe(data => {
  console.log(data); // 你能看到数据，说明请求没问题
  this.heroes = data; // 重点！这行是不是被你注释了？你提到的"相关数据被注释"可能就是指这个？
});

很多API不会直接返回纯数组，而是包裹在对象里（比如{ code: 200, data: [{},{}] }），这时候你直接把整个响应丢给*ngFor，它肯定循环不了：

this.heroService.getHeroes().subscribe(response => {
  // 得取到数组部分再赋值！
  this.heroes = response.data; 
  console.log(this.heroes); // 这里要确认打印的是数组，不是对象
});

别犯低级拼写错误！比如少写了星号（ngFor改成*ngFor），或者循环的变量名写错：

<!-- 错误示范 -->
<div ngFor="let hero of heroList">{{hero.name}}</div>

<!-- 正确写法 -->
<div *ngFor="let hero of heroes">{{hero.name}}</div>

如果还是不行，你可以把heroes组件的TS代码和模板代码贴出来，我帮你揪细节～

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