Ionic3中使用HttpClient获取单对象数据时NgFor报错求助

你遇到的这个错误完全说得通——Angular的*ngFor指令只能用来遍历数组这类可迭代对象，但你的API返回的是单个用户对象，不是数组，所以模板渲染的时候就会报错，虽然控制台能打印出对象数据，但没法用*ngFor去遍历它。

下面给你两种针对性的解决办法，根据你的API需求选就行：

办法1：修改后端API，让它返回数组格式 #

如果你的API本来就应该返回多个用户（或者以后可能返回多个），那最规范的做法是修改后端，让它始终返回数组。比如把单个用户对象放到数组里返回，举个例子（假设用PHP/Laravel）：

// 原来可能是 return response()->json($user);
// 修改成：
return response()->json([$user]);

这样API返回的就是[{ nombre: "Víctor", Apellido: "Robles", ... }]这种数组格式，你的前端代码不用改就能正常渲染了。

办法2：前端把单个对象包装成数组 #

如果你的API确实只需要返回单个用户，那就在前端拿到数据后，把它包装成一个数组，让*ngFor能正常遍历。

修改组件代码（show-posts.ts） #

在getUsers方法里，把返回的单个对象放到数组里：

getUsers() {
  this.restProvider.getUsers()
    .then(data => {
      // 把单个用户对象包装成数组
      this.users = [data];
      console.log(this.users);
    });
}

更健壮的写法（兼容数组/单个对象） #

如果有时候API可能返回数组，有时候返回单个对象，可以加个判断，确保this.users始终是数组：

getUsers() {
  this.restProvider.getUsers()
    .then(data => {
      // 检查返回值是不是数组，不是的话就包装成数组
      this.users = Array.isArray(data) ? data : [data];
      console.log(this.users);
    });
}

或者在Provider里统一处理（rest.ts） #

也可以把处理逻辑放到Provider里，这样所有调用getUsers的地方都不用单独处理：

getUsers() {
  return new Promise(resolve => {
    this.http.get(this.apiUrl+'/users').subscribe(response => {
      // 统一将返回值处理成数组
      const result = Array.isArray(response) ? response : [response];
      resolve(result);
    }, err => {
      console.log(err);
    });
  });
}

这样组件里的this.users = data就不用改了，直接用就行。

选其中一种办法修改后，你的模板就能正常渲染单个用户的数据了～

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