Angular HTTP呼び出しからJSONオブジェクトのプロパティをキャッチし、Angular CLIの「プロパティなし」エラーを修正するにはどうすればよいですか?

Shuvo

パブリックAPIを使用して映画データをフェッチしています。そして、以下はAPIからそのデータを取得するための私のサービスメソッドです。

getMovieList(): Observable<Movie[]> {
  return this.http.get(this.moviesURL).pipe(
   map((data: Movie[]) => data),
   catchError(this.handleError),
);

}

そして、これはそのデータをサブスクライブするためのコンポーネントのメソッドです。

getMovieList(): void {
  this.movieApiService.getMovieList()
   .subscribe(
     (data: Movie[]) => {
       this.movieList = data.results;
     }
  );
}

問題は、API 4つの特性を持つオブジェクトを返すことがあります:pageresultstotal_pagestotal_resultsそして、私はresultsプロパティだけが必要です。しかしdata.results、コンポーネントのプロパティに割り当てようとしたりdata.results、代わりにサービスメソッドから送信しようとすると、dataangularcliでエラーが発生します"results is an undefined property of data"私の質問はresultsdataオブジェクトに触れることなくプロパティを直接取得する方法ですまた、にMovie[]タイプを割り当てる必要がありresultsます。しかし現在、私はタイプをdataオブジェクトに設定しています。

ミロスラフ・マクシモビッチ

問題はモデルにあり、Moviesの配列を期待することを定義しましたが、結果と呼ばれる4つのプロパティを持つオブジェクトを受け取ります。そのため、解決策は次のとおりです。

次のようにインターフェイスを定義します。

  export interface IDataFromApi {
    results: Movie[];
    page: number;
    total_pages: number;
    total_results: number;
}

次に、最初の関数は次のようになります。

  getMovieList(): Observable<IDataFromApi> {
    return this.http.get(this.moviesURL).pipe(
     map((data: IDataFromApi) => data),
     catchError(this.handleError),
  );

そしてコンポーネントのメソッド:

 getMovieList(): void {
  this.movieApiService.getMovieList()
   .subscribe(
     (data: IDataFromApi) => {
       this.movieList = data.results;
     }
  );
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ