从Node.js服务器获取JSON无法在Ionic页面展示，报NgFor相关错误

你遇到的这个错误是Angular里非常常见的场景——*ngFor指令只能绑定到可迭代的集合（比如数组），但你的POST请求返回的是一个单个JavaScript对象{ passed:true, message: "sdf" }，并非数组类型，所以Angular找不到合适的迭代器来处理它，就抛出了这个报错。

解决方案 #

根据你的实际情况，有两种可行的解决路径：

方式1：前端处理，将单个对象包装为数组

如果无法修改后端返回的格式，你可以在获取到响应后，把单个对象放到一个数组里，让*ngFor能正常遍历：

修改checkName方法里的POST请求订阅逻辑：

this.http.post('http://localhost:8080/checkname', data).pipe(
  map(res => res.json())
).subscribe(response => {
  // 将单个对象包装成数组
  this.results = [response]; 
  console.log('POST Response:', response);
});

同时清理代码里重复声明的results变量，把这两行：

results: any;
public results: result[];

改成统一的初始化声明：

public results: any[] = []; // 初始化为空数组，避免页面加载时因变量未定义报错

方式2：修改后端接口，返回数组格式响应

如果你有权限调整Node.js后端代码，直接让接口返回数组格式的响应即可，比如：

[{ "passed":true, "message": "sdf" }]

这样前端无需额外处理，直接赋值给results就能正常使用*ngFor：

this.results = response;

修正模板代码 #

另外，你的home.html标签存在多余空格，会导致渲染异常，修正为：

<ion-item *ngFor="let r of results">
  {{ r.message }}
</ion-item>

额外提示 #

你的GET请求返回的是字符串Welcome!，如果之后要展示这个内容，不要用*ngFor，直接在模板里用变量绑定（比如{{ getResponseContent }}）即可，因为字符串同样不是可迭代集合。

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