在 Angular 8 中找不到不同的支持对象“[object Object]" [英] Cannot find a differ supporting object '[object Object] in Angular 8

问题描述

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

<块引用>

错误错误:找不到不同的支持对象[object Object]"对象"类型.NgFor 仅支持绑定到可迭代对象，例如数组.在 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)在 Object.eval [as updateDirectives] (PlaylistsComponent.html:2)在 Object.debugUpdateDirectives [作为 updateDirectives] (core.js:45259)在 checkAndUpdateView (core.js:44271)在 callViewAction (core.js:44637)

这是我的 user.service.ts:

public getUserPlaylists(): Observable{const 端点 = environment.spotifyApi.host + "me/playlists";const httpOptions = {标头:新的 HttpHeaders({授权:`Bearer ${this.accessToken}`，}),};返回 this.http.get(endpoint, httpOptions);}

这是我的 playlists.component.ts:

播放列表:任意；构造函数(私有路由器:路由器，私有 userService:UserService){}ngOnInit() {this.getPlaylists();}获取播放列表(){让 observable = this.userService.getUserPlaylists();observable.subscribe((数据) => {this.playlists = 数据；控制台日志(this.playlists)；});}

这是我的 html:

<div class="test" *ngFor="让播放列表的播放列表">{{playlist.name}}

从浏览器更新控制台:

对象href: "https://api.spotify.com/v1/users/12164174667/playlists?offset=0&limit=20"项目:阵列(2)0: {collaborative: false, description: "", external_urls: {...}, href: "https://api.spotify.com/v1/playlists/0tNJ7TiGOqqbiFratEY8WD", id: "0tNJ7TiGOqqbiFratEY8WD", ...}1:{collaborative:false，描述:我正在听的歌曲；每两周更新一次."，external_urls:{…}，href:https://api.spotify.com/v1/playlists/24G8qVxmH4Sg6WfsaRAumW", id: "24G8qVxmH4Sg6WfsaRAumW", ...}长度:2__proto__:数组(0)限制:20下一个: 空偏移量:0上一个: 空总数:2__proto__:对象

解决方案

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

像这样更新你的方法:

getPlaylists() {让 observable = this.userService.getUserPlaylists();observable.subscribe((数据) => {this.playlists = data.items;控制台日志(this.playlists)；});}

I'm trying to get spotify API from current user's playlists I have it in my console but I tried to put it into html and i'm getting this error:

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)

Here's my 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);
}

Here's my 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);
  });
}

and here is my html:

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

Update console from browser:

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

解决方案

As you can clearly see in the logs that ngFor expects Iterables. Instead of assigning full object just assign items

Upate your method like this:

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

这篇关于在 Angular 8 中找不到不同的支持对象“[object Object]"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！