在 Angular 8 中找不到不同的支持对象 '[object Object]

Question

我正在尝试从当前用户的播放列表中获取 spotify API 我在我的控制台中有它，但我试图将它放入 html，但出现此错误：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.ngDoCheck (common.js:4841) at checkAndUpdateDirectiveInline (core.js:31913) at checkAndUpdateNodeInline (core.js:44367) at checkAndUpdateNode (core.js:44306) at debugCheckAndUpdateNode (core.js:45328) at debugCheckDirectivesFn (core.js:45271) at Object.eval [as updateDirectives] (PlaylistsComponent.html:2) at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259) at checkAndUpdateView (core.js:44271) at callViewAction (core.js:44637)

这是我的 user.service.ts:

public getUserPlaylists(): Observable<any> {
  const endpoint = environment.spotifyApi.host + "me/playlists";

  const httpOptions = {
    headers: new HttpHeaders({
      Authorization: `Bearer ${this.accessToken}`,
    }),
  };

  return this.http.get(endpoint, httpOptions);
}

这是我的 playlists.component.ts：

playlists: any;
constructor(private router: Router, private userService: UserService) {}

ngOnInit() {
  this.getPlaylists();
}

getPlaylists() {
  let observable = this.userService.getUserPlaylists();
  observable.subscribe((data) => {
    this.playlists = data;
    console.log(this.playlists);
  });
}

这是我的 html:

<div class="playlists text-center">
  <div class="test" *ngFor="let playlist of playlists">
    {{playlist.name}}
  </div>
</div>

从浏览器更新控制台：

Object
href: "https://api.spotify.com/v1/users/12164174667/playlists?offset=0&limit=20"
items: Array(2)
0: {collaborative: false, description: "", external_urls: {…}, href: "https://api.spotify.com/v1/playlists/0tNJ7TiGOqqbiFratEY8WD", id: "0tNJ7TiGOqqbiFratEY8WD", …}
1: {collaborative: false, description: "Songs I'm currrently listening to; updated every 2 weeks.", external_urls: {…}, href: "https://api.spotify.com/v1/playlists/24G8qVxmH4Sg6WfsaRAumW", id: "24G8qVxmH4Sg6WfsaRAumW", …}
length: 2
__proto__: Array(0)
limit: 20
next: null
offset: 0
previous: null
total: 2
__proto__: Object

Answer 1

您可以在日志中清楚地看到 ngFor 需要 Iterables。而不是分配完整的对象只是分配项目

像这样更新你的方法：

getPlaylists() {
 let observable = this.userService.getUserPlaylists();
 observable.subscribe((data) => {
 this.playlists = data.items;
 console.log(this.playlists);
 });
}

Answer 2

我检查了 Spotify API 并在播放列表对象中找到了 returns。在 external_urls 节点中您可以获得所需的播放列表 url。然后你可以迭代 this.playlists.

getPlaylists() {
  let observable = this.userService.getUserPlaylists();
  observable.subscribe((res) => {
    this.playlists = res.external_urls;
    console.log(this.playlists);
  });
}

在 Angular 8 中找不到不同的支持对象 '[object Object]

Cannot find a differ supporting object '[object Object] in Angular 8

html

javascript

typescript

angular

angular8