Cách sử dụng đường quan sát có ống Async bên trong chức năng bấm Angular2

Question

Tình huống: Tôi đang sử dụng FirebaseObjectObservable để điền mẫu Ionic 2 (rc0) của tôi. mẫu mã:

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

Hồ sơ TS là

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

this.course là một đối tượng căn cứ hỏa lực quan sát được. Vấn đề là, phần này sẽ không hoạt động: (click) = "openDeckOnBrowser (course.deckUrl). Khi khóa học.deckUrl trống. Tôi không thể chuyển giá trị cho hàm.

Chỉ hacky way I tìm thấy để làm việc xung quanh cho đến nay là thế này:

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

và trên các sự kiện nhấp chuột:

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); 
    } 

Nhưng bất kỳ cách nào chính thức và dễ dàng hơn để tiếp cận này

Answer 1

Chỉ cần đăng ký với thể quan sát được ở bạn mã , Và lưu trữ quá trình chính nó trong các thành phần:

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

Sau đó, trong bạn xem:

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

(mặc dù tôi có lẽ sẽ sử dụng ng-nếu và chỉ hiển thị các mô tả và nút một lần khóa học là có sẵn)

Answer 2

Trong mẫu của bạn (click)="openDeckOnBrowser(course.deckUrl)" được đánh giá ngay sau khi mẫu được phân tích cú pháp. Bạn không sử dụng đường ống không đồng bộ ở đây, do đó, deckUrl trống. Bạn có thể sửa lỗi này bằng cách thêm một ống async thứ hai:

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

Tuy nhiên, điều này không tốt bằng hai đăng ký sẽ được tạo.

A (tốt hơn) thay thế:

Quan chức docs on the AsyncPipe luôn luôn sử dụng *ngFor để ra một danh sách các mục và không *ngIf để ra một mục duy nhất. Lý do rất đơn giản: chỉ thị *ngIf không cho phép bất kỳ bài tập nào. Nhưng chúng ta có thể làm việc xung quanh hạn chế này:

Mẫu trông như sau:

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

Và trong thành phần, chúng tôi sẽ chỉ bản đồ khóa học vào một danh sách của một khóa học duy nhất:

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

See working Demo in Plunker