Angular2 - Bindung der UI an beobachtbare Eigenschaft

Question

Ich benutze Angular 2 mit rxjs beobachtbar. Ich habe diese Schnittstelle erstellt:

interface IGame { 
    name: string; 
    description: string; 
} 

ich es als eine beobachtbare bin mit und als Eingabe in den ui vorbei:

@Input() public game: Observable<IGame>; 

Das Problem ist, wenn in UI beim Binden das gesamte Objekt wie sehen das kann ich es Wert gedruckt und wird angezeigt:

<h3>{{game | json}}</h3> 

Während spezifische Eigenschaft mit Bindung (die von-Kurs seinen Teil des Spiels) nichts auf dem Bildschirm - nur ein empt y string:

<h3>{{game.name}}</h3> 
<h3>{{game.description}}</h3> 

ist es überhaupt möglich? sollte ich den Namen & Beschreibung als verschiedene Eingänge übergeben?

Answer 1

async Das Rohr hat die Zeichnung in Ansicht Bindings

<h3>{{(game | async)?.name}}</h3> 

Die ? nur notwendig ist, wenn null Werte könnten emittiert werden.

Answer 2

Hier ist ein Beispiel

// the controller 
import { Component, OnInit } from '@angular/core'; 
import { Observable }  from 'rxjs/Observable'; 
// your controller metadata 
// .... 
export class ListComponent implements OnInit { 
    vehicles: Observable<Array<any>> 
    ngOnInit() { 
     this.vehicles = Observable.interval(2200).map(i=> [{name: 'car 1'},{name: 'car 2'}]) 
    } 
} 
// in the template 
<div *ngFor='let vehicle of vehicles | async'> 
    {{vehicle.name}} 
</div>