我一直在使用Angular 16、TypScript和电影数据库(TMDB)开发SPA.
在app\services\movie-service.service.ts
中我有:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { MovieResponse, Movie } from '../models/Movie';
@Injectable({
providedIn: 'root'
})
export class MovieService {
constructor(private http: HttpClient) { }
public getMovies(): Observable<MovieResponse[]> {
return this.http.get<MovieResponse[]>(`${environment.apiUrl}/movie/now_playing?api_key=${environment.apiKey}`);
}
}
型号app\models\Movie.ts
看起来是这样的:
export interface Movie {
id?: number;
adult?: boolean;
backdrop_path?: string;
poster_path?: string;
title?: string;
tagline?: string;
overview?: string;
genre_ids?: any;
original_title?: string;
release_date?: string;
runtime?: number;
vote_average?: string;
}
export interface MovieResponse {
results?: Movie[];
total_pages?: number;
total_results?: number;
page?: number;
}
在HomePageComponent
中,我try 输出电影:
import { Component } from '@angular/core';
import { MovieResponse, Movie } from '../../models/Movie';
import { MovieService } from '../../services/movie-service.service';
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent {
public movieResponse!: MovieResponse[];
public movies: Movie[] = [];
constructor(private movieService: MovieService) { }
public getMovies() {
this.movieService.getMovies().subscribe((response) => {
this.movieResponse = response;
console.log(this.movieResponse);
this.movies = this.movieResponse.results;
})
}
ngOnInit() {
this.getMovies();
}
}
行console.log(this.movieResponse)
正确地显示带有results
arary、total_pages
等的响应;
问题
行this.movies = this.movieResponse.results
导致错误:
TS2339: Property 'results' does not exist on type 'MovieResponse[]'.
Questions
- 我做错了什么?
- 解决此问题的最可靠方法是什么?