Angular 12 - 找不到不同的支持对象“[object Object]”类型为“对象”。 NgFor 仅支持绑定到 Iterables，例如数组

Question

我从外部 API 获取了大量数据，我想在我的 html 中实现它，但是每次我尝试对数据执行 *ngFor 时，它最终都会出错，有人可以告诉我如何解决这个问题??

 --------HTML-----------

<ng-container *ngFor="let movie of filme">
<mat-card class="mat-card" fxFlex="0 1 calc(33.3% - 11px)"
fxFlex.lt-md="0 1 calc(50% - 11px)"
fxFlex.lt-sm="100%">
  <mat-card-header >
  <mat-card-title class="mat-card-title">
    <div>
      <p>{{movie}}</p>
    </div>
  </mat-card-title>
  </mat-card-header>
</mat-card>
</ng-container>

---------TYPESCRIPT------

  filme:any[];;

 imgUrl: string;
 titleImg: string;

  constructor(private filmes: BuscarFilmesService) {
      this.filmes.filmes().subscribe(res=>this.filme=res);
  }

 -------SERVICE----

  filmes(): Observable<Filmes[]> {
    return this.htpp.get<Filmes[]>(`${this.API_Url}/discover/movie?sort_by=popularity.desc&api_key=${this.API_key}&language=pt-BR`);
  }

Answer 1

您的代码片段看起来是正确的。我的猜测是订阅中的 res 返回一个对象而不是数组。

我首先尝试通过执行以下操作来查看 res 是否实际上是一个数组：

constructor(private filmes: BuscarFilmesService) {

   this.filmes.filmes().subscribe(res =>
   {   
       this.filme = res;
       console.log(this.filme);
   });
}

如果它确实返回一个数组。然后，您可以尝试使用简单的 div 和 *ngFor 来缩小范围，以防 HTML 出现一些错误。

<div *ngFor="let movie of filme">
  {{movie}}
</div>