你好友好的早起的鳥兒！
我通過以下回應從 API 獲取資料：
我的服務將 Observable<Movie[]> 物件回傳給我的組件。在組件的 HTML 中，我想使用異步管道而不是訂閱。所以我不必取消訂閱組件以防止記憶體泄漏。
電影串列.component.html：
<div class="movie-list">
<div class="movie-element" *ngFor="let movie of movies$ | async">
<app-movie
[movie]="movie"
></app-movie>
</div>
</div>
電影串列.component.ts：
export class MovieListComponent implements OnInit {
movies$!: Observable<Movie[]>;
constructor(private movieService: MovieService) { }
ngOnInit(): void {
this.movies$ = this.movieService.getMostPopularMovies();
}
}
電影服務.ts：
})
export class MovieService {
private apiKey: string = environment.apiKey;
private apiMostPopularMovies: string = 'https://api.themoviedb.org/3/movie/popular';
constructor(private http: HttpClient) { }
getMostPopularMovies(): Observable<Movie[]> {
let params = new HttpParams();
params = params.set('api_key', this.apiKey);
return this.http.get<Movie[]>(this.apiMostPopularMovies, {params});
}
}
電影.component.ts：
export class MovieComponent implements OnInit {
@Input() movie!: Movie;
constructor() { }
ngOnInit(): void {
}
}
我的電影模型只有一個標題、poster_path 和 vote_average 欄位。該欄位與結果陣列中的回應具有相同的名稱。我不需要回復中的任何其他內容。
不知何故，我必須將結果陣列的回應中的欄位映射到我的電影模型。有人可以解釋如何使用異步管道執行此操作嗎？
uj5u.com熱心網友回復：
好吧，問題是您的反應實際上不是Movie[]，但您的反應response.results是。
為了解決這個問題，您可以map在 rxjs 中使用運算子。如果您可以在服務中使用以下代碼，則異步管道可以正常作業。
export class MovieService {
private apiKey: string = environment.apiKey;
private apiMostPopularMovies: string = 'https://api.themoviedb.org/3/movie/popular';
constructor(private http: HttpClient) { }
getMostPopularMovies(): Observable<Movie[]> {
let params = new HttpParams();
params = params.set('api_key', this.apiKey);
return this.http
.get<{results: Movie[]}>(this.apiMostPopularMovies, {params})
.pipe(map(response => response.results));
}
}
uj5u.com熱心網友回復：
如果我對您的理解正確，您可以在您的服務中嘗試：
mappedMoviesObs: Observable<Movies[]> = this.getMostPopularMovies().pipe(
map((movies: Movies[]) => movies.forEach((movie) => { // do mapping})
);
在 html 中使用mappedMoviesObs而不是movies$.
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/515369.html
標籤：有角度的异步可观察的订阅