角2（TypeScript）：HTMLテンプレートのhttp.getからオブジェクトにバインドできません。

Question

これがなぜ起こっているのかを判断する悪魔がいます。私は、CLIを使用して設定A2プロジェクトを持っていると私は、次のコンポーネントがあります。

import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-user-profile-card', 
    templateUrl: 'user-profile-card.component.html', 
    styleUrls: ['user-profile-card.component.scss'] 
}) 
export class UserProfileCardComponent implements OnInit { 

    public person; 

    constructor(private http: Http) { 
    } 

    getUserProfile(){ 
    this.http.get('http://somedomain.com/12345') 
     .map(res => res.json()) 
     .subscribe(
      person => { this.person = person.person }, 
      err => console.error(err), 
      () => console.log(this.person.sex) 
     ); 
    } 

    ngOnInit() { 
    this.getUserProfile(); 
    } 
} 

this.person.sexためのコンソールログは、正しい値を示しているが、私はそれからにバインドしようとすると、テンプレート：

<div>{{ person.sex }}</div> 

私は次のエラーを取得する：

undefined is not an object (evaluating 'self.context.person.sex')

この上の任意のアイデア？

Answer 1

すべてのhttp呼び出しが非同期操作であり、データが到着する前にテンプレートにperson.sexを表示しようとしているからです。あなたは、データが到着するまで、あなたのテンプレートを「守る」ために安全なナビゲーション演算子（?）を使用することができます。

<div> 
    {{ person?.sex }} 
</div> 

ます。またngIfディレクティブを使用することができます。

<div *ngIf="person"> 
    {{ person.sex }} 
</div> 

この方法では、あなたのdivはしません変数personが入力されるまでDOMに表示されます。安全なナビゲーションオペレーターhereと詳細ngIfの指示hereについて詳しく読むことができます。