找不到类型为'object'的其他支持对象'[object Object]'。 NgFor仅支持绑定到数组等Iterable。[Angular 8]

Question

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

API

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（）作为API cal的结果，则会看到它内部可能还有另一个元素，例如数组。

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

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

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