Angular шаблон: Как связать RXJS Observable и прочитать его свойства?

Я создал этот интерфейс:

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

Я использую его как Observable и передаю как Input в Component:

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

Я вижу, как его значение печатается с использованием канала JSON:

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

При привязке к определенному свойству ничего не отображается (только пустая строка):

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

Ответ 1

Труба async выполняет подписку в привязке вида

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

? требуется только тогда, когда могут быть выбраны значения null.

Ответ 2

Ярлык для привязки нескольких свойств

Использование * ngIf-As-Syntax выделяет канал async в один вызов (и одну подписку).

  <ng-container *ngIf="( game$ | async ) as game">
    <h3>{{ game.name }}</h3>
    <h3>{{ game.description }}</h3>
  </ng-container>

Это создает только одну подписку на наблюдаемое, устраняет необходимость в ?. и значительно упрощает работу с шаблоном.

Примечание: я переименовал исходный пример, который можно наблюдать, с game на game$.

Ответ 3

Здесь пример

// 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>