非同期 HTTP 呼び出し後に Angular Observable からデータに適切にアクセスするにはどうすればよいですか?

Angular で Observable/HTTP/Async 呼び出しから応答を返す方法

問題:

Observable が返される非同期呼び出しを通じてデータを取得しますが、その非同期の性質により、データにアクセスすると未定義になります。操作。

サービス:

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEventList(): Observable<any>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get("http://localhost:9999/events/get", options)
                .map((res)=> res.json())
                .catch((err)=> err)
  }
}

コンポーネント:

@Component({...})
export class EventComponent {

  myEvents: any;

  constructor( private es: EventService ) { }

  ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
        });

    console.log(this.myEvents); //This prints undefined!
  }
}

理由:

非同期操作は完了するまでに時間がかかりますが、JavaScript は実行されます同期コードをすぐに実行します。 console.log(this.myEvents);サーバーからのデータが受信される前に実行されます。

解決策:

応答が到着したら、サブスクライブ コールバックを使用して応答を処理します:

this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //<-- not undefined anymore
    });

結論:

内で非同期操作を処理します。コールバックまたはサブスクライブ関数を使用して、受信後にデータにアクセスします。これにより、データが未定義または null でないことが保証されます。

以上が非同期 HTTP 呼び出し後に Angular Observable からデータに適切にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。