愚蠢的“错误错误：尝试区分“[对象对象]”时出错。只允许使用数组和可迭代对象'答案

【问题标题】：Stupid 'ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed'愚蠢的“错误错误：尝试区分“[对象对象]”时出错。只允许使用数组和可迭代对象'
【发布时间】：2021-07-23 23:58:29
【问题描述】：

我无法让它工作，我知道我错过了一些愚蠢的东西......无论我尝试什么，我都会不断收到这个错误：“错误错误：尝试区分'[object Object]'时出错。只有数组和允许迭代”我到底想念什么。我知道这很愚蠢，但我无法在任何地方在线找到答案。无论我尝试什么，我总是会回到这个错误。

服务代码：

  SearchByTitle(title: string) {
    const url = `${this.url}&s=${title}`;
    return this.http.get<Movies[]>(url)
    .pipe(
      retry(1),
      catchError(this.handleError)
    );
  }

我收到了我的服务的回复。我可以将它记录到控制台。它是有效的 JSON 数据。我的模型与我的 JSON 响应匹配。

组件代码

  title = 'AngMDB';
  movieData: Movies[] = [];

  constructor(private movieService: MovieService){  }

  ngOnInit() { 
    this.GetData();
  }

  // Fetch movie data
  GetData() {
    this.movieService.SearchByTitle('star')
      .subscribe((res: Movies[]) => {
        this.movieData = res;
        console.log(JSON.stringify(res));
      },
      error => {
        console.log("An unexpected error has occured.");
      }
    );
    return this.movieData;
  }

HTML

<div class="content">
    <button id="searchBtn" (click)="GetData">Search</button>
    <div class="movieList" *ngIf="movieData">
        <div class="movies" *ngFor="movie of movieData">
            <p class="movieTitle">Movies</p>
        </div>
    </div>
</div>

API 响应

{"Search":[{"Title":"Star Wars: Episode IV - A New Hope","Year":"1977","imdbID":"tt0076759","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00…ctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"},{"Title":"Star Wars: Episode V - The Empire Strikes Back","Year":"1980","imdbID":"tt0080684","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00…ItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VI - Return of the Jedi","Year":"1983","imdbID":"tt0086190","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00…MtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VII - The Force Awakens","Year":"2015","imdbID":"tt2488496","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_SX300.jpg"},{"Title":"Star Wars: Episode I - The Phantom Menace","Year":"1999","imdbID":"tt0120915","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYTRhNjcwNWQtMGJmMi00…ItODVmMTdjNWI0ZDA2XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode III - Revenge of the Sith","Year":"2005","imdbID":"tt0121766","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNTc4MTc3NTQ5OF5BMl5BanBnXkFtZTcwOTg0NjI4NA@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode II - Attack of the Clones","Year":"2002","imdbID":"tt0121765","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMDAzM2M0Y2UtZjRmZi00…EtOTE3NzU5ZDVlMTU5XkEyXkFqcGdeQXVyNDUyOTg3Njg@._V1_SX300.jpg"},{"Title":"Star Trek","Year":"2009","imdbID":"tt0796366","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjE5NDQ5OTE4Ml5BMl5BanBnXkFtZTcwOTE3NDIzMw@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VIII - The Last Jedi","Year":"2017","imdbID":"tt2527336","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjQ1MzcxNjg4N15BMl5BanBnXkFtZTgwNzgwMjY4MzI@._V1_SX300.jpg"},{"Title":"Rogue One: A Star Wars Story","Year":"2016","imdbID":"tt3748528","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjEwMzMxODIzOV5BMl5BanBnXkFtZTgwNzg3OTAzMDI@._V1_SX300.jpg"}],"totalResults":"3612","Response":"True"}

【问题讨论】：

请给出您从 api 收到的响应？
检查响应。此外，在 ngFor 中省略了 'let' 关键字

标签： json angular api

【解决方案1】：

您的服务返回带有电影数组和“totalResults”等附加信息的对象，您需要通过从响应对象中获取“搜索”字段来获取电影数组。所以就改变

this.movieData = res;

到

this.movieData = res.Search;

在您的 GetData 函数中

【讨论】：

这工作GetData() { await this.movieService.SearchByTitle('star') .subscribe((res: any) => { this.movieData = res['Search']; console.log(JSON.stringify(this.movieData)); }, error => { console.log("An unexpected error has occured."); } ); return this.movieData; }