आरएक्सजेएस और कोणीय 2 का उपयोग करके एक वास्तविक अवलोकन संग्रह कैसे बनाया जाए?

Question

मान लीजिए कि मैं स्टोर से रिकॉर्ड्स का एक सेट पुनर्प्राप्त करना चाहता हूं, उन्हें *ngFor का उपयोग करके सूची में प्रदर्शित करें, उदा।

<ul> 
    <li *ngFor="let record in records | async"> 
     ... 
    </li> 
</ul> 

अब उपयोगकर्ता 'नई ...' बटन क्लिक करता है, एक और रिकार्ड की दुकान में जोड़ा जाता है और

recordAdded: EventEmitter<string>; 

आग मेरे स्थान के बारे में बताने के लिए। तो मुझे वह नया रिकॉर्ड मिलता है - और वह रिकॉर्ड केवल स्टोर से और ... ओह, मैं इस अतिरिक्त रिकॉर्ड को प्रदर्शित करने के लिए अपना *ngFor कैसे प्राप्त करूं?

ठीक है, तो मैं सभी रिकॉर्ड सरणी में, उदाहरण के

_records: Record[]; 

के लिए रखने के लिए और Observable<Record[]>

तरह

this.recordService.getAll().subscribe(r => this._records = r); 

की सदस्यता लेकर इस सरणी भरने लेकिन इस सरणी एक Observable ही होने की जरूरत है हो सकता है एक नया रिकॉर्ड होने पर उपभोक्ताओं को सूचित करने के लिए। तो

observableRecords = Observable.create(obs => { 
    this.recordService.getAll().subscribe(rec => { 
     this._records = rec; 
     obs.next(rec); 
     // Got the array published, now waiting for events 
     this.recordAdded.subscribe(rec => { 
      this._records.push(rec); 
      obs.next(this._records); 
     });    
    }); 
}); 

ओह ... इतना ही नहीं वहाँ भी है भूमि के ऊपर का एक टन के रूप में पूरे सरणी फिर से प्रकाशित हो जाता है हर बार एक नया रिकॉर्ड जोड़ दिया जाता है और, को देखने के लिए इस कष्टदायी है - सबसे अधिक संभावना है - कोणीय 2 होगा प्रत्येक मोड़ पर खरोंच से पूरी सूची को फिर से बनाएं।

चूंकि यह एक आम परिदृश्य है, मुझे लगता है कि ऐसा करने के लिए एक बेहतर तरीका होना चाहिए।

Answer 1

हाँ, निश्चित रूप से है - आप flatmap उपयोग करने के लिए

flatmap जब भी आप मिल के भीतर एक सदस्यता के सदस्यता लेने जाने का रास्ता है की जरूरत है।

आपके पास धाराओं (एक मेटास्ट्रीम) की धारा है और आपको इसे फ़्लैट करने की आवश्यकता है - तो आप एक बार फ़्लैटेड स्ट्रीम (नेस्टेड सब्सक्राइब से परहेज) पर सब्सक्राइब करने में सक्षम होंगे।

ट्यूटोरियल को तब तक पढ़ें जब तक कि यह आपको फ्लैटमैप में पेश नहीं करता है।

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

यहाँ आप शुरू करने के लिए कुछ कोड है ...

public tagsTextStream = this.tagsTextSubject.asObservable().flatMap((q:string) => { 
// noinspection UnnecessaryLocalVariableJS 
let restStream = this.restQueryService.getTagsList(q) 
    .map((tags:any) => { 
    // filter out any tags that already exist on the document 
    let allTags = _.map(tags, 'name'); 
    let documentTags = _.map(this.tags, 'name'); 
    return _.pull(allTags, ...documentTags); 
    }) 
    .catch((err:any) => { 
    return Observable.throw(err); 
    }); 
return restStream; 
}).publish().refCount(); 

मत भूलना ... .publish()। Refcount()

या आप ऊपर के साथ समाप्त एकाधिक अनुरोध और सामान।

मेरे द्वारा भेजे गए लिंक पर इसके बारे में और पढ़ें।

पुनश्च

उपरोक्त कोड में, क्ष मूल्यों प्रारंभिक नमूदार से उत्सर्जित जा रहा है। सलाह दी जानी चाहिए कि अवलोकन योग्य और धाराएं अदला-बदली हैं, वे एक ही बात हैं। देखने योग्य सिर्फ उस स्ट्रीम का वर्णन कर रहा है जिसका आप सदस्यता ले सकते हैं। इसलिए, प्रतिक्रियाशील प्रोग्रामिंग (आरएक्स)। आप स्ट्रीम से आने वाली घटनाओं पर प्रतिक्रिया कर रहे हैं।