Angular 6：尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象

Posted 2023-03-05

【中文标题】Angular 6：尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象

【英文标题】：Angular 6 : Error trying to diff '[object Object]'. Only arrays and iterables are allowed

【发布时间】：2018-11-25 20:49:24

【问题描述】：

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

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

component.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>

component.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;
        );
   );
  

service.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

【问题讨论】：

@SurenSrapyan 检查更新

【参考方案1】：

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

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

【讨论】：

我有另一个线程是链接：***.com/questions/50858647/…你能帮忙吗？