Question

我正在尝试向Deezer的API发出请求，我遇到了这个错误：

“ERROR错误：尝试diff'[object Object]时出错。只有数组和允许迭代“。

有人可以指导吗？我收到错误，无法弄清楚为什么？

这是我的 componet.ts

`

import { Component, OnInit } from '@angular/core';
import { TracksService } from '../services/tracks.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // instantiate posts to an empty array
  tracks: any = [];

  constructor(private tss: TracksService) { }

  ngOnInit() {
    // Retrieve posts from the API
    this.tss.getAllTracks().subscribe(data => {
      this.tracks = data;
    });
  }
}

`

错误必须在这里因为我知道问题是可能是返回一个对象而不是一个数组，但我没有看到我有问题但不知道如何。

component.html `

<div class="container">
  <div class="row" *ngFor="let track of tracks">
    <div class="card card-block">
      <h4 class="card-title">{{ track.title }}</h4>
      <img class="card-image" src="{{ track.album.cover }}" alt="image">
      <audio controls src="{{ track.preview }}"></audio>
      <p class="card-text">{{ track.duration }}</p>
      <a href="#" class="card-link">{{ track.link }}</a>
      <a href="#" class="card-link">{{ track.title }}</a>
    </div>
  </div>
</div>

`

track.service.ts `

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class TracksService {

  constructor(private http: Http) { }

  // Get all posts from the API
  getAllTracks() {
    return this.http.get('/api/radio')
      .map(res => res.json());
  }
}

COMPLETE LOG

HomeComponent.html:2 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.webpackJsonp.../../../core/esm5/core.js.DefaultIterableDiffer.diff (core.js:7499)
    at NgForOf.webpackJsonp.../../../common/esm5/common.js.NgForOf.ngDoCheck (common.js:2583)
    at checkAndUpdateDirectiveInline (core.js:12372)
    at checkAndUpdateNodeInline (core.js:13893)
    at checkAndUpdateNode (core.js:13836)
    at debugCheckAndUpdateNode (core.js:14729)
    at debugCheckDirectivesFn (core.js:14670)
    at Object.eval [as updateDirectives] (HomeComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655)
    at checkAndUpdateView (core.js:13802)

`

我是初学者，所以如果你看到这个问题太明显，请忽略它，请不要给我一个-1。 :)

错误：尝试diff'[object Object]'时出错。只允许数组和迭代

0 个答案: