Angular で Observable からの非同期応答を処理するにはどうすればよいですか?

Angular で Observable/http/async 呼び出しからの応答を返すにはどうすればよいですか?

問題:

Angular でサーバーからデータを取得するObservable を使用しようとすると、初期値が未定義になる可能性があります

サービス:

@Injectable()
export class EventService {
  ...
  getEventList(): Observable<any> {
    ...
    return this.http.get(...).map(...).catch(...);
  }
}

コンポーネント:

export class EventComponent {
  myEvents: any;
  ngOnInit() {
    this.es.getEventList().subscribe((response) => {
      this.myEvents = response;
    });
    console.log(this.myEvents); // Initially undefined
  }
}

理由:

HTTP リクエストは非同期です。つまり、console.log( this.myEvents) 行は応答の前に実行されます

解決策:

サブスクライブ コールバックを使用して、応答が到着した後にのみ応答を処理します。

ngOnInit() {
  this.es.getEventList().subscribe((response) => {
    this.myEvents = response;
    console.log(this.myEvents); // Not undefined
  });
}

考慮事項:

• 実行データが到着したときのサブスクライブ コールバック内のすべての操作。
• その非同期を認識します。この操作は、応答待機中のインターフェイスのフリーズを防ぎます。
• このアプローチは、Promise ベースの非同期プログラミングの then コールバックに似ています。

以上がAngular で Observable からの非同期応答を処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。