NativeScriptとAngular2 - オブジェクトをバインドする方法は？

Question

私はREST APIからデータを表示しようとしています。ただし、データがロードされる前にUIがレンダリングされます。だから次のエラーが表示されます：

Cannot read property 'name' of undefined

オブジェクトをバインドするにはどうすればよいですか？

コンポーネント：

@Component({ 
    selector: 'foo-detail', 
    templateUrl: 'foo.component.html', 
    providers: [FooService], 
}) 
export class FooDetailComponent implements OnInit { 
    public foo:Foo; 

    constructor(private fooService:FooService, 
       private route:ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.route.params 
      .map(params => params['id']) 
      .subscribe(fooId => { 
       this.fooService 
        .get(+fooId) 
        .subscribe(res => this.foo = res); 
      }); 
    } 
} 

サービス：

@Injectable() 
export class FooService { 
    constructor(private http: Http) {} 

    get(fooId) { 
     return this.http.get('http://api.foo.com/foos/' + fooId) 
      .map(res => res.json()) 
      .map(foo => { 
       return new Foo(foo.id, foo.name, foo.description); 
      }); 
    } 
} 

テンプレート：あなたはngIfディレクティブまたはとしても知られている安全なナビゲーション演算子（?）を（使用することができます

<ActionBar [title]="foo.name"></ActionBar> 
<GridLayout> 
    <Label [text]="foo.description"></Label> 
</GridLayout> 

Answer 1

エルヴィスオペレータ）がテンプレートを「保護する」：

ngIfディレクティブ

<div *ngIf="foo"> 
<ActionBar [title]="foo.name"></ActionBar> 
<GridLayout> 
    <Label [text]="foo.description"></Label> 
</GridLayout> 
</div> 

エルビス演算子

<ActionBar [title]="foo?.name"></ActionBar> 
<GridLayout> 
    <Label [text]="foo?.description"></Label> 
</GridLayout> 
</div> 

私はそれがどのように動作するかを理解するためにofficial Angular 2 page about ngIf directiveを読んだだけでなく、template syntax page about safe nagivation operator (?)示唆しています。