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

Question

I'm trying to Get array data from the following API: http://dradiobeats.x10host.com/api/areas

API

My 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; }

Thanks.

Answer 1

The API has returned an object containing your data, rather than an array. If you console.log() (or look at the link you posted) the result of the API call you will see that it probably has another element inside that is an array eg

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

So you just need to change the line of code to be:

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

Answer 2

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

users$: User[] = [];