ObservableをAngular2クリック関数内でAsyncパイプで使用する方法

Question

状況：FirebaseObjectObservableを使用して、Ionic 2（rc0）テンプレートを作成しています。テンプレートコード：

<p>{{(course | async)?.description}}</p> 
<button ion-button dark full large (click)="openDeckOnBrowser(course.deckUrl)"> 
    <ion-icon name='cloud-download'></ion-icon> 
    <div>View Deck</div> 
</button> 

TSファイルが

this.course = this.af.database.object('/bbwLocations/courses/' + courseId); 

this.courseでは、観察可能Firebaseオブジェクトです。 （click）= "openDeckOnBrowser（course.deckUrl）。course.deckUrlが空のため、値を関数に渡すことはできません。

Tho only hacky way I

<button id="{{(course | async)?.deckUrl}}" ion-button dark full large (click)="openDeckOnBrowser($event)"> 
    <ion-icon name='cloud-download'></ion-icon> 
    <div id="{{(course | async)?.deckUrl}}">View Deck</div> 
</button> 

し、Clickイベントに：？

openDeckOnBrowser(event):void { 
    console.log(event); 
    let target = event.target || event.srcElement || event.currentTarget; 
    let idAttr = target.attributes.id; 
    let url = idAttr.nodeValue; 
    console.log (url); 
    } 

しかし、これにアプローチする公式と簡単な方法

Answer 1

ちょうどあなたの中に観察を購読するこれまでのところ、これはされて回避することが判明コード、およびコンポーネントにコース自体を格納します。

this.af.database.object('/bbwLocations/courses/' + courseId) 
    .subscribe(course => this.course = course); 

を次に、あなたに表示します。

<p>{{ course?.description }}</p> 
<button ion-button dark full large (click)="openDeckOnBrowser(course?.deckUrl)"> 

（私はおそらくNG-場合にのみ使用しますが、コースがあり一度説明とボタンを表示利用可能）

Answer 2

テンプレートでは、(click)="openDeckOnBrowser(course.deckUrl)"は、テンプレートが解析されるとすぐに評価されます。ここでは非同期パイプを使用しないため、deckUrlは空です。あなたは第二非同期パイプを追加することによってこの問題を解決することができます

<p>{{(course|async)?.description}}</p> 
<button ... (click)="openDeckOnBrowser((course|async).deckUrl)">...</button> 

2つのサブスクリプションが作成されます。しかし、これはいいではありません。

A（良い）代替：

公式docs on the AsyncPipe常に出力する項目のリストではなく*ngIf出力に単一の項目を*ngForを使用しています。理由は簡単です：*ngIfディレクティブは割り当てを許可しません。しかし、我々は、この制限を回避することができます

<div *ngFor="let course of course$|async"> 
    <p>Course: {{course?.name}}</p> 
    <p>Url: {{course?.url}}</p> 
</div> 

を、コンポーネントに、我々は1つだけのコースのリストにコースをマッピングします：

this.getCourse().map(c=>[c]); 

次のように

テンプレートが見えます

See working Demo in Plunker