APIデータを処理する方法

Question

私のイオンプロジェクトでは、APIを使用してフライトの詳細を取得しました。そのAPIでは、 "airportResources"という名前のオブジェクトが で、4つの値（departureTerminal、arrivalTerminal、departureGate、arrivalGate）を持っています。しかし、オブジェクトがapiで利用できない場合や、すべての値が利用できない場合もあります（つまり、departureTerminal、arrivalTerminalまたは任意の2つまたは3つの値のみが含まれることを意味します）。 私の問題は、この値を表示しようとすると、エラーが表示されます。 この問題をどのように処理できますか。

enter code here 

get_arrivalflights（）{

var communicationParams = { 
    showLoader: true, 
    reqUrl: "", 
    reqBody: {}, 
    callBackSuccess: (response) => { 
    console.log(response); 
    this.objectData = response.flightStatuses; 

    }, 
    callBackFailure: (response) => { console.log("failure dude"); console.log(response); } 
}; 
this.restservice.makeGetRequest(communicationParams); 

}

：以下含まれる応答の スクリーンショット

TSコード（airportResourcesオブジェクトこの画像では、2つの値を有します）

Html：

プロバイダに呼び出し

<div class="col" style="font-size: 18px;text-align: center">{{item.airportResources.departureTerminal}}</div> 

アピ：

makeGetRequest(communicationParams: any) { 

    this.baseUrl = " the url i want to call "; 


    var loader; 
    if (communicationParams.showLoader == true) { 
     loader = this.loadingController.create({ 
     content: "" 
     }); 
     loader.present(); 
    } 
    this.http.get(this.baseUrl + communicationParams.reqUrl) 
     .map(response => response.json()) 
     .subscribe(communicationParams.callBackSuccess, function(respone) { 
      if (communicationParams.showLoader == true) { 
      loader.dismiss() 
      } 
      communicationParams.callBackFailure(respone); 
     }, 
     () => { 
      console.log('Authentication Complete'); 
      if (communicationParams.showLoader == true) { 
      loader.dismiss() 
      } 
     }); 
    } 

エラーメッセージ：あなたのHTML内

Answer 1

、表示するために待機するaysnc演算子を使用し、そして得られないために、オプションの引数（？）データが存在しない場合の構造上のエラー

{{ (item | async)?.airportResources.departureTerminal }}