javascript - Angular 6 : Error trying to diff '[object Object]' . 只允许数组和可迭代对象

Question

我想使用 Angular 6 在我的前端显示从 api 返回的数据

这是我所做的:但数据没有显示:

组件.htm:

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Popular Movies</h3>
</div>
<div class="panel-body">
<div class="row">
    <div *ngFor="let movie of movies; let i=index" class="col-md-2">
        <div *ngIf="i < 6">
        <img *ngIf="movie.poster_path" class="thumbnail" src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}">
        <h4>{{movie.title}}</h4>
        <p>{{movie.release_date}}</p>

        <p><a class="btn btn-default" routerLink="/movie/{{movie.id}}">View details &raquo;</a></p>
      </div>
    </div>
</div>
</div>
</div>

组件.ts:

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { Location } from '@angular/common';
import { MoviesService } from '../movies.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.scss']
})
export class MoviesComponent implements OnInit {
   movies: any;

 constructor(private router: ActivatedRoute, private http: Http, private location: Location, private moviesService: MoviesService) {
      this.movies = [];
  }

  ngOnInit() {
    this.router.params.subscribe((params) => {
      const id = params['id'];
      this.moviesService.getMovies(id)
      .then(movies => {
          console.log(movies);
          this.movies = this.movies;
        });
   });
  }
}

服务.ts:

    import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import {Jsonp} from '@angular/http';

@Injectable({
  providedIn: 'root'
})
export class MoviesService {

  private apiUrl = 'http://localhost:8000/movies';
  constructor(private http: Http, private _jsonp: Jsonp) { }
  getMovies(id: string): Promise<any> {
      return this.http.get(this.apiUrl)
                 .toPromise()
                 .then(this.handleData)
                 .catch(this.handleError);
  }
  private handleData(res: any) {
    const body = res.json();
    console.log(body); // for development purposes only
    return body.result || body || { };
}
 private handleError(error: any): Promise<any> {
     console.error('An error occurred', error); // for development purposes only
     return Promise.reject(error.message || error);
 }
}

当我运行我的应用程序时，出现以下错误:

MoviesComponent.html:19 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

我的代码有什么问题吗？ Angular 6 有很多变化:(任何帮助将不胜感激，谢谢。

电影结构:

{page: 1, total_results: 365014, total_pages: 18251, results: [,…]}
page
:
1
results
:
[,…]
0
:
{vote_count: 595, id: 351286, video: false, vote_average: 6.7, title: "Jurassic World: Fallen Kingdom",…}
1
:
{vote_count: 2250, id: 383498, video: false, vote_average: 7.7, title: "Deadpool 2",…}
2
:
{vote_count: 4857, id: 299536, video: false, vote_average: 8.4, title: "Avengers: Infinity War",…}
3
:
{vote_count: 35, id: 525102, video: false, vote_average: 3.4, title: "Girl Lost",…}
4
:
{vote_count: 6792, id: 284053, video: false, vote_average: 7.4, title: "Thor: Ragnarok",…}
5
:
{vote_count: 11073, id: 135397, video: false, vote_average: 6.5, title: "Jurassic World",…}
6
:
{vote_count: 1628, id: 338970, video: false, vote_average: 6.2, title: "Tomb Raider",…}
7
:
{vote_count: 917, id: 348350, video: false, vote_average: 6.8, title: "Solo: A Star Wars Story",…}
8
:
{vote_count: 9056, id: 297762, video: false, vote_average: 7.2, title: "Wonder Woman",…}
9
:
{vote_count: 6148, id: 284054, video: false, vote_average: 7.3, title: "Black Panther",…}
10
:
{vote_count: 157, id: 402900, video: false, vote_average: 6.8, title: "Ocean's 8",…}
11
:
{vote_count: 13447, id: 118340, video: false, vote_average: 7.9, title: "Guardians of the Galaxy",…}
12
:
{vote_count: 39, id: 260513, video: false, vote_average: 6.9, title: "Incredibles 2",…}
13
:
{vote_count: 2070, id: 337167, video: false, vote_average: 6, title: "Fifty Shades Freed",…}
14
:
{vote_count: 641, id: 449176, video: false, vote_average: 8.3, title: "Love, Simon",…}
15
:
{vote_count: 9272, id: 10195, video: false, vote_average: 6.7, title: "Thor", popularity: 63.826664,…}
16
:
{vote_count: 0, id: 482560, video: false, vote_average: 0, title: "Covet: The Island of Desire",…}
17
:
{vote_count: 5720, id: 181808, video: false, vote_average: 7.1, title: "Star Wars: The Last Jedi",…}
18
:
{vote_count: 849, id: 268896, video: false, vote_average: 5.9, title: "Pacific Rim: Uprising",…}
19
:
{vote_count: 4733, id: 141052, video: false, vote_average: 6.3, title: "Justice League",…}
total_pages
:
18251
total_results
:
365014

Answer 1

您只需分配电影而不是 this.movi​​es，因此电影只是您需要将结果绑定(bind)到电影的对象。

.then((movies:any) => {
    console.log(movies);
    this.movies = movies.results;
});