无法将*ngFor与键值管道一起使用来显示数据

Question

这是一个component.html文件，在使用|键值后，我无法使用键值对显示数据，有人能建议我更好地将对象数据类型转换为角度中的数组吗

<div class="slider">
<div class="slide" *ngFor="let item of items | keyvalue">
<div class="slide-bg">
<img class="slide-bg-image" src="path" alt="">
</div>
<div class="slide-pane">
<h2 class="name">{{item.title}}: {{item.string}}</h2> // displaying error
</div>
</div>
<div class="meta">
<div class="info">
<span class="rating"><span class="material-icons">star</span><span
class="rating-value">7.5/10</span>
<span>463 reviews</span>
<span>2021</span>
</span>
</div>
</div>
<div class="desc mt-5">desc</div>
</div>
</div>
</div>

接口

export interface Movie {
adult: boolean;
backdrop_path: string;
genre_ids: number[];
id: number;
original_language: string;
original_title: string;
overview: string;
popularity: number;
poster_path: string;
release_date: string;
title: string;
video: boolean;
vote_average: number;
vote_count: number;
}

这是服务

export class MoviesService {
movieURL = 'https://api.themoviedb.org/3/movie/upcoming?api_key=c0f9f2d9cb978825b4fea0898bc2d598';
constructor(private http: HttpClient) {}
getMovies() {
return this.http.get<any>(this.movieURL);
}
}

这是滑块组件

export class SliderComponent implements OnInit {
@Input() items: Movie[] = [];
constructor() {}
ngOnInit(): void {}
}

这是Homecomponent.ts

export class HomeComponent implements OnInit {
movies: any = [];
constructor(private moviesService: MoviesService) {}
ngOnInit(): void {
this.moviesService.getMovies().subscribe((response) => {
this.movies = response;
});
}
}

如果">|keyvalue"；从*ngFor＝"；让items中的item|keyvalue"；然后低于错误，

Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
at DefaultIterableDiffer.diff (core.mjs:27563:1)
at NgForOf.ngDoCheck (common.mjs:3185:42)
at callHook (core.mjs:2552:1)
at callHooks (core.mjs:2511:1)
at executeCheckHooks (core.mjs:2443:1)
at refreshView (core.mjs:9493:1)
at refreshComponent (core.mjs:10655:1)
at refreshChildComponents (core.mjs:9280:1)
at refreshView (core.mjs:9534:1)
at refreshComponent (core.mjs:10655:1)

Answer 1

home.component.ts

使用this.movies=response.results更新了HomeComponent

export class HomeComponent implements OnInit {
movies: any = [];
constructor(private moviesService: MoviesService) {}
ngOnInit(): void {
this.moviesService.getMovies().subscribe((response) => {
this.movies = response.results;
});
}
}

这将解决问题，并且不需要使用键值管道，因为对象数据正在slider.comcomponent.ts 中转换为数组

export class SliderComponent implements OnInit {
@Input() items: Movie[] = [];
constructor() {}
ngOnInit(): void {}
}