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

Question

我正在尝试从以下 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;
}

谢谢。

Answer 1

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

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

所以您只需要将代码行更改为：

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

Answer 2

分配 users$ 一个空数组，如下所示：

users$: User[] = [];

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

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.[Angular 8]

javascript

html

angular

angular8

ngfor