वेधशालाओं के एक और सेट के पूरा होने के बाद अवलोकन योग्य है - कोणीय, rxjs, rxjs5

तो, मैं आरएक्सजेएस के लिए नया हूं और एंगुलर 5 के साथ खेल रहा था, सोच रहा था कि निम्नलिखित को कैसे पूरा किया जाए:

आइए मान लें कि हमारे पास एक फॉर्म है। जब पृष्ठ लोड होता है, तो हमें सर्वर से डेटा के साथ पॉप्युलेट होने के लिए 3 चयन की आवश्यकता होती है, इसलिए हमारे पास इसे पूरा करने के लिए 3 अवलोकन योग्य होते हैं।

अब, हमारे पास यह देखने योग्य भी है कि जब रूट पैरामीटर बदलते हैं (उस स्थिति में, हमें अनुरोधित रिकॉर्ड प्राप्त करना होगा और फॉर्म को पॉप्युलेट करना होगा):

// These 3 guys will get the required data for each select

this.countryService.getAll().subscribe(countries => {
this.countries = countries;
});
this.categoryService.getAll().subscribe(categories => {
this.categories = categories;
});
this.sectorService.getAll().subscribe(sectors => {
this.sectors = sectors;
});


// And this is for the change in url

this.route.paramMap.subscribe(params => {
this.formDisabled = true;
const id = params.get("id");

// We get the resource based on the id param
this.service.get(id).subscribe(contact => {
this.contact = contact;

this.form.reset(this.contact);

this.formDisabled = false;
}
});

अब, मुझे कॉलबैक की आवश्यकता है this.service.get(id).subscribe() 3 चयनों के बाद ही निष्पादित करने के लिएआबादी, यानी जब उनके संबंधित कॉलबैक पूरे हो गए हैं, अन्यथा हम फॉर्म के साथ चीजों को करने की कोशिश कर सकते हैं जब यह पूरी तरह से निर्मित नहीं होता है। मैं चाहता हूं कि यह अन्य 3 अनुरोधों के समानांतर संसाधन का अनुरोध करता रहे, लेकिन निष्पादित करें अन्य 3 पूरी तरह से किए जाने के बाद ही कॉलबैक (इसके साथ फॉर्म रीसेट करें)।

उत्तर:

यदि आप चरणों को लेआउट करने का प्रयास करते हैं तो यह अक्सर मदद करता है क्या आप इसके बजाय हासिल करना चाहते हैं किस तरह आप हासिल करना चाहते हैं। यह आपको अधिक "प्रतिक्रियाशील" तरीके से सोचने के लिए प्रशिक्षित करता है।

1. 3 ड्रॉपडाउन प्राप्त करें। यह समानांतर में किया जा सकता है

   • ड्रॉपडाउन मान असाइन करें

2. मार्ग परम प्राप्त करें

   • फॉर्म को अक्षम करें
3. आईडी द्वारा पुनर्प्राप्त करने के लिए कॉल सेवा जो चरण 2 से है

4. बाकी के करो:

   • संपर्क के मूल्यों को असाइन करें।

   • फ़ॉर्म को रीसेट करें

   • फ़ॉर्म को पुन: सक्षम करें

एक बार जब आप चरणों को लेआउट कर लेते हैं, तो उन्हें वेधशालाओं के रूप में कोड करना काफी तुच्छ होगा:

//Step 1: Call the dropdownsService in parallel
Observable.forkJoin([
this.countryService.getAll(),
this.categoryService.getAll(),
this.sectorService.getAll()
])
.switchMap(([countries, categories, sectors]) => {
//Assign the dropdown values
this.countries = countries;
this.categories = categories;
this.sectors = sectors;
//Step 2: Retrieve the route params
return this.route.paramMap;
})
.switchMap(({id}) => {
//disable the form
this.formDisabled = true;
//step 3: Call the service to get contact info
return this.service.get(id)
})
.subscribe(contact => {
//Do the rest
this.contact = contact;
this.form.reset(this.contact);
this.formDisabled = false;
});

पुनश्च: मैं अधिक संक्षिप्त और पठनीय कोड के लिए ऑब्जेक्ट और एरे डिस्ट्रक्टिंग का उपयोग करता हूं।

संपादित करें:

अगर आप अपने फोन करना चाहते हैं this.service.get के समानांतर dropdown सेवा, उन्हें उसी में डाल दो Observable.forkJoin:

Observable.forkJoin([
this.countryService.getAll(),
this.categoryService.getAll(),
this.sectorService.getAll(),
this.route.paramMap.switchMap(({id}) => {
this.formDisabled = true;
return this.service.get(id);
})
])
.subscribe(([countries, categories, sectors, contact]) => {
//Assign the dropdown values
this.countries = countries;
this.categories = categories;
this.sectors = sectors;

//Do the rest
this.contact = contact;
this.form.reset(this.contact);
this.formDisabled = false;
})

2 संपादित करें:

यदि आप किसी भी अवलोकन योग्य समूह में परिवर्तन सुनना चाहते हैं, भले ही पहले कौन उत्सर्जित करता है, उपयोग करें combineLatest():

Observable.combineLatest(
Observable.forkJoin([
this.countryService.getAll(),
this.categoryService.getAll(),
this.sectorService.getAll()
]),
this.route.paramMap.switchMap(({id}) => {
this.formDisabled = true;
return this.service.get(id);
})
)
.subscribe(([countries, categories, sectors, contact]) => {
//Assign the dropdown values
this.countries = countries;
this.categories = categories;
this.sectors = sectors;

//Do the rest
this.contact = contact;
this.form.reset(this.contact);
this.formDisabled = false;
})