मेरे पास एक एएफएस देखने योग्य है जिसे मैं अपने फ्रंटएंड में इस तरह दिखा सकता हूं:

constructor(
    public fb: FirebaseProvider, 
) {
    this.group = this.navParams.get('group');
    this.contactsList = this.fb.getContactsByGroup(this.group.id);
}

मेरी एफबी सेवा:

getContactsByGroup(groupId: string):Observable<Contact[]> {
    return this.afs.collection<Contact>(`groups/${groupId}/contacts`).valueChanges();
}

फिर मेरा टेम्पलेट:

<single-contact-list-item 
    [contactId]="contact.id" 
    (goToModalEvent)="onGoToModal($event)"
    *ngFor="let contact of contactsList | async">
</single-contact-list-item>

अब मेरे पास एक टेक्स्टरेरा है जो सबमिट होने पर एक ईवेंट ट्रिगर करता है। मैं जो करना चाहता हूं वह अवलोकन योग्य (संपर्क सूची) में प्रत्येक आइटम के माध्यम से लूप है और एक संपत्ति प्राप्त करें, उदाहरण के लिए:

public sendSMS(): void {
    this.contactsList.forEach(contact => {
        console.log(contact.number); // nothing!
    })
    //this.deviceProvider.sendSMS(this.contactsList, this.message);
}

मुझे लगता है कि मुद्दा यह है कि टेम्पलेट में एसिंक पाइप का उपयोग करके अवलोकन करने योग्य पहले ही सब्सक्राइब हो चुका है। किसी भी मदद की सराहना की।

2
rhysclay 26 मार्च 2018, 08:13

4 जवाब

सबसे बढ़िया उत्तर

आपको अपने घटक में एक चर में अवलोकन योग्य का परिणाम मैन्युअल रूप से प्राप्त करने की आवश्यकता होगी।

constructor(
     public fb: FirebaseProvider, 
) {
     this.group = this.navParams.get('group');
     this.fb.getContactsByGroup(this.group.id).subscribe(list => 
        this.contactsList = list);    
  }

और केवल contactList उपलब्ध होने पर रेंडर करने के लिए अपना टेम्प्लेट बदलें। और सूची पर पुनरावृति।

<ng-container *ngIf="contactsList">
    <single-contact-list-item 
    [contactId]="contact.id" 
    (goToModalEvent)="onGoToModal($event)"
    *ngFor="let contact of contactsList">
    </single-contact-list-item>
<ng-container>

ऐसा करने से आपका फंक्शन sendSms जैसे है वैसे ही काम करेगा और कॉन्टेक्ट्स की लिस्ट मिल जाएगी।

public sendSMS(): void {
    this.contactsList.forEach(contact => {
      console.log(contact.number); // WORKING!!!!
    })
    //this.deviceProvider.sendSMS(this.contactsList, this.message);
  }
2
Naman Kheterpal 26 मार्च 2018, 05:54

दिलचस्प डेटा निकालने के लिए आप अपने अवलोकन योग्य को अपनी सरणी का पुन: उपयोग कर सकते हैं और अपनी स्ट्रीम में कुछ संचालन कर सकते हैं। यदि यह केवल आपके डेटा से संबंधित साइड इफेक्ट के लिए है, तो आप एक टैप ऑपरेटर का उपयोग कर सकते हैं और अपना प्रत्येक के लिए अंदर कर सकते हैं।

 public sendSMS(): void {
    this.contactsList.pipe(
      tap(contactArray => {
         contactArray.forEach(contact => {
           // Do side effect operations with your array
         });
      }),
      // execute only once and complete the observable
      take(1)
    ).subscribe();
 }

   this.deviceProvider.sendSMS(this.contactsList, this.message);
1
Quentin Fonck 26 मार्च 2018, 10:27

डेटा स्ट्रीम तक पहुंचने के लिए आपको पहले Observable की सदस्यता लेनी होगी, फिर लूप करना होगा। प्रयत्न

public sendSMS(): void {
    this.contactsList.subscribe(lists=>{
        lists.forEach(contact=>{
            console.log(contact.number);
        }
    }
  }
3
Hareesh 26 मार्च 2018, 05:47

आपको पुनरावृति के लिए डेटा को फिर से लाना होगा, क्योंकि हो सकता है कि contactsList का पहले ही उपभोग किया जा चुका हो। तो this.fb.getContactsByGroup(this.group.id) पर एक और कॉल करना जरूरी है।

public sendSMS(): void {
  // use .first() to just process once
  this.fb.getContactsByGroup(this.group.id).first().subscribe(contacts => {
    contacts.forEach(contact => {
      console.log(contact.number);
    });
    // <>
  })
  
  // notice the code above is asynchronous, so if the line below
  // depends on it, place it on the line marked with "// <>" above
  //this.deviceProvider.sendSMS(this.contactsList, this.message);
}
0
acdcjunior 26 मार्च 2018, 05:55