Angular 12 - 找不到不同的支持对象'[object Object]'类型为"对象"。NgFor 仅支持绑定到可迭代对象，如数组

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);
});
}

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

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