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

Question

我正在嘗試從當前用戶的播放列表中獲取 spotify API 我在我的控制台中有它，但我試圖將它放入 html 並且我收到此錯誤：

錯誤 錯誤：找不到支持“對象”類型的 object“[對象對象]”的不同。 NgFor 僅支持綁定到 Iterables，例如 Arrays。 在 NgForOf.ngDoCheck (common.js:4841) 在 checkAndUpdateDirectiveInline (core.js:31913) 在 checkAndUpdateNodeInline (core.js:44367) 在 checkAndUpdateNode (core.js:44306) 在 debugCheckAndUpdateNode (core.js:45328) 在 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。 而不是分配完整的 object 只是分配項目

像這樣更新您的方法：

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

Answer 2

我瀏覽了Spotify API並在播放列表 object 中找到了它返回的內容。 在external_urls節點中，您可以獲得所需的播放列表 url。 然后你可以迭代this.playlists 。

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