配列から内部オブジェクトを取得

Question

私はMovieSearchComponentというコンポーネントを持っています。これにより、サービスMovieSearchServiceとモデルMovieがインポートされます。

@Component({ 
    selector: 'movie_search', 
    templateUrl: './movie_search-component.html', 
    providers: [MovieSearchService] 
}) 

export class MovieSearchComponent{ 
    movies: Movie[] = []; 

    constructor(private movieSearchService: MovieSearchService){}; 

    ngOnInit(){ 
    this.getMovies(); 
    } 

    getMovies(){ 
    this.movieSearchService.getMovies() 
     .subscribe((response)=>{ 
     this.movies = response; 
     console.log(this.movies) 
     }); 
    } 
} 

サービスです。

import {Movie} from "../movie"; 

@Injectable() 
export class MovieSearchService{ 

    private results = {}; 
    private api = '***7039633f2065942cd8a28d7cadad4'; 
    private url = 'https://api.themoviedb.org/3/search/movie?api_key=' + this.api + '&language=en-US&query=Batman&page=1&include_adult=false;'; 

    constructor(private http: Http){} 

    getMovies(): Observable<Movie[]>{ 
    return this.http.get(this.url) 
     .map(res => res.json()) 
    } 
} 

テンプレート：これは、サービスから返された映画からすべてのタイトルを示してい

<div> 
    <ul> 
    <li *ngFor="let movie of movies.results"> 
     {{ movie.title }} 
    </li> 
    </ul> 
</div> 

。しかし、テンプレートの中のすべてのムービーオブジェクトを持つ結果配列を選択する必要があります。これは私には見えません。

私はMovieSearchComponentにconsole.log(this.movies.results)へconsole.log(this.movies)を変更すると、私はこれが映画のモデルでエラーにproperty 'results' does not exist on type Movie[].

を得る：

export class Movie{ 
    constructor(
    public id: number, 
    public title: string, 
){} 
} 

だから私はそれを使用することができたとき、私はconsole.log(this.movies.results)を使用できない理由テンプレート。

Answer 1

結果がMovieクラスで定義されていないためです。

にごgetMovies方法を変更し

：

getMovies(): Observable<Movie[]>{ 
    return this.http.get(this.url) 
     .map(res => res.json().results) 
    }