テンプレート内のIonic2アレイへのアクセス

Question

コントローラのjsonからテンプレートにデータを表示しようとしています。

私が見つけたすべての選択肢はngForを使用していますが、私はそれらのうちの1つだけを表示したいので、すべての項目を反復したくありません。

getServicio(servicioId: number) { 
     let getServicio = 'services?id=' + servicioId; 
     this.http.getRequest(getServicio) //returns a json 
      .then(
      res => { 
       this.services = res[0]; 
      } 
      ) 
      .catch(
      error => console.log(error) 
      ); 
    } 

そして、私は単に書きテンプレートに：

{{services.id}} 

それは私にエラーを与える：

Cannot read property 'id' of undefined

がそれを行うには任意の代替ではないですか？それとも別の方法で、テンプレートにすべてのデータを渡すなどのインデックスを配列に入る：事前に

{{services[0].id}} 

ありがとう！

Answer 1

到着する前に（httpリクエストが非同期である）データ（services.id）を表示しようとしています。つまり、テンプレートがレンダリングされるときにservices.idがundefinedです。最も簡単な解決策は、データが到着するまで、あなたのテンプレートを「守る」ために安全なナビゲーション演算子（?）を使用することです：

{{services?.id}} 

あなたがservicesを表示するテンプレートの一部ではないので、あなたはまた、ngIfディレクティブを使用することができます

<div *ngIf="services"> 
    {{services?.id}} 
</div> 

は安全なナビゲーション演算子（?）hereとngIfディレクティブの詳細について詳しく読む：servicesが定義されるまで、レンダリング。