找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。[Angular 8]答案

【问题标题】：Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.[Angular 8]找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。[Angular 8]
【发布时间】：2020-03-28 20:23:21
【问题描述】：

我正在尝试从以下 API 获取数组数据： http://dradiobeats.x10host.com/api/areas

API

我的 app.component.ts：

import { Component, OnInit } from "@angular/core";
import { User } from "./users.model";
import { UsersService } from "./users.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  users$: User[];

  constructor(private userService: UsersService) {}

  ngOnInit() {
    return this.userService.getUsers().subscribe(Data => (this.users$ = Data));
  }
}

app.component.html：

<div *ngFor="let users of users$">
  <p>{{ users.name }}</p>
</div>

user.service.ts：

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { User } from "./users.model";

@Injectable({
  providedIn: "root"
})
export class UsersService {
  apiUrl = "http://dradiobeats.x10host.com/api/areas";

  constructor(private _http: HttpClient) {}

  getUsers() {
    return this._http.get<User[]>(this.apiUrl);
  }
}

user.model.ts：

export class User {
  name: string;
  description: string;
  domain: string;
}

谢谢。

【问题讨论】：

您的 API 正在返回一个对象，而您正在尝试对其进行迭代。您的传入数据看起来像这样 { data: [ ] } 您必须将 .subscribe 中的代码更改为类似 this.users$ = Data['data']

标签： javascript html angular angular8 ngfor

【解决方案1】：

API 返回了一个包含您的数据的对象，而不是一个数组。如果您 console.log() （或查看您发布的链接）API 调用的结果，您会看到它内部可能有另一个元素，即数组，例如

{
  data: [... list of items...]
}

所以你只需要把这行代码改成：

return this.userService.getUsers().subscribe(Data => (this.users$ = Data.data));

【讨论】：

【解决方案2】：

像这样分配users$一个空数组：

users$: User[] = [];

【讨论】：