Angular2 क्लिक समारोह के अंदर Async पाइप के साथ प्रत्यक्ष का उपयोग कैसे करें

Question

परिस्थिति: मैं FirebaseObjectObservable उपयोग कर रहा हूँ मेरी आयोनिक 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> 

टीएस फ़ाइल

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

this.course एक Firebase वस्तु मानने योग्य है है। समस्या यह है कि यह हिस्सा काम नहीं करेगा: (क्लिक करें) = "openDeckOnBrowser (course.deckUrl)। पाठ्यक्रम के रूप में .deckUrl खाली है। मैं फ़ंक्शन पर मान पास नहीं कर सकता।

केवल एक ही हैकी तरीका 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> 

और क्लिक करें घटना पर:

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

हालांकि मैं शायद का प्रयोग करेंगे एनजी-तभी विवरण और बटन दिखाने के एक बार कोर्स है, और घटक में पाठ्यक्रम खुद की दुकान उपलब्ध है)

Answer 2

अपने टेम्पलेट (click)="openDeckOnBrowser(course.deckUrl)" में जैसे ही टेम्पलेट को पार्स है मूल्यांकन किया जाता है। आप async पाइप यहाँ का उपयोग नहीं करते, इसलिए deckUrl खाली है। आप एक दूसरे async पाइप जोड़कर इसे ठीक कर सकते हैं:

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

बहरहाल, यह अच्छा नहीं है के रूप में दो सदस्यता बनाया जाएगा।

ए (बेहतर) विकल्प:

आधिकारिक docs on the AsyncPipe हमेशा *ngFor उत्पादन करने के लिए एक आइटम के और नहीं *ngIf उत्पादन के लिए एक आइटम सूची का उपयोग करें। कारण सरल है: *ngIf निर्देश किसी भी असाइनमेंट की अनुमति नहीं देता है। लेकिन हम इस सीमा के आसपास काम कर सकते हैं:

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

और घटक में, हम सिर्फ एक पाठ्यक्रम की एक सूची के लिए पाठ्यक्रम के नक्शे होगी::

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

टेम्पलेट के रूप में निम्नानुसार लग रहा है

See working Demo in Plunker