नेस्टेड कोणीय 2 Async पाइप कैसे हल करते हैं?

Question

मैं थोड़ा उलझन में हूं कि कैसे और कब नेस्टेड एसिंक पाइप कोणीय 2 टेम्पलेट्स में हल होते हैं, और दस्तावेज़ीकरण अभी एक महान जगह पर नहीं है, इसलिए मुझे उम्मीद है कि एसओ पर कोई मदद कर सकता है।

मेरे पास Observable.of(myArray).delay(2000) के माध्यम से एक सेवा से लौटा एक बहुत ही सरल आरएक्सजेएस ऑब्जर्जेबल है - देरी समय के साथ क्या चल रहा है यह दिखाने में मदद करने के लिए है।

मेरे टेम्पलेट में, मैं सिर्फ नमूदार एक enclosing <p> टैग में ऊपर लौटे नियंत्रित करने के लिए पर एक async पाइप जब यह दिखाया गया है का उपयोग कर रहा है, और फिर कि <p> टैग के अंदर वापस आ सरणी लंबाई दिखाने की कोशिश:

<p *ngIf="!(lists | async)">Waiting for lists...</p> 
<p *ngIf="lists | async">We have lists! How many? => {{(lists | async)?.length}}</p> 

View the Plunker.

तो जब आप इस लोड, "सूचियों के लिए इंतज़ार कर" प्रदर्शित किया जाता है, 2 सेकंड बाद हम मिल "हम सूचियों है!" भाग, अपेक्षित के रूप में, लेकिन फिर हलचल सरणी लंबाई को हल करने और प्रदर्शित करने के लिए आंतरिक एसिंक पाइप के लिए 2 सेकंड लगते हैं।

मैं वही समय दिखाने के लिए लंबाई कैसे प्राप्त कर सकता हूं जो पर्यवेक्षी पर निर्भर करता है जो इसके मूल्य को वापस कर रहा है? या यह एसिंक पाइप के लिए सिर्फ एक अच्छा उपयोग मामला नहीं है, और मुझे इसके बजाय मेरे घटक में subscribe() चाहिए?

Answer 1

असिंक पाइप ठीक हैं। इस विषय में एक और चीज शामिल है।

NgIf निर्देश स्रोत कोड पर जांचें।

जब स्थिति सही होती है तो दृश्य दृश्य कंटेनर में दृश्य को एम्बेड किया जाता है। के लिए ViewContainerRef#createEmbeddedView

this._viewContainer.createEmbeddedView(this._templateRef); 

डॉक्स एक एंबेडेड templateRef के आधार पर देखें को दर्शाता है और निर्दिष्ट सूचकांक में इस कंटेनर में यह डाल देता है।

असल में यह एनजीआईएफ के अंदर जो कुछ भी है, उसे तुरंत चालू करता है और इसे डोम में रखता है।

जब हालत झूठी यह डोम से सब कुछ को दूर करता है और के लिए ViewContainerRef#clear

यह

this._viewContainer.clear(); 

डॉक्स के अंदर सभी दृश्यों को साफ करता है इस कंटेनर में सभी दृश्य को नष्ट कर।

तो, अब हम जानते हैं कि NgIf क्या करता है, आप यह व्यवहार क्यों देख रहे हैं? सरल, और मैं इसे चरणों

1. <p *ngIf="!(lists | async)">Waiting for lists...</p> में समझाएंगे: इस बिंदु lists परिणाम अभी तक नहीं पहुंचता है, पर है, तो यह मार डाला जाता है।

2. <p *ngIf="lists | async": यह ngIf दो सेकंड में निष्पादित किया जाएगा (आपके द्वारा निर्धारित विलंब का समय)।एक बार जब मूल्य आता है तो एनजीआईएफ निर्देश तत्काल होगा कि यह अंदर क्या है और इसे डोम में डाल दें।

3. (lists | async)?.length: यह एसिंक पाइप को दो बार बाद में दो बार बाद में निष्पादित करने के बाद निष्पादित किया जाता है।

तो अपने समय में यह इस प्रकार दिखाई देगा (मैं अपने गरीब समय डिजाइन के लिए वास्तव में माफी चाहता हूँ)

*ngIf="lists | async" 
----(2 seconds)-----> 

        (lists | async)?.length 
        ------(2 seconds)-----> 
               print value 

है यही कारण है कि आप इस अंतर को देखते हैं। *ngIf?.length के साथ समानांतर में नहीं चल रहा है।

आप इसे immediatly देखना चाहते हैं तो आप के रूप में की तरह

// Template 
<p *ngIf="lists">We have lists! How many? => {{lists.length}} some value</p> 

// Observable 
this._listService.getLists(2000).subscribe(res => this.lists = res); 

इस प्रकार इस कोर्स के अपने अन्य async पाइप को प्रभावित करेगा delay ऑपरेटर को दूर करने, या मैन्युअल सदस्यता लें और मान सेट अपने आप को होगा। अपने कोड के साथ यह plnkr देखें।

मुझे उम्मीद है कि यह थोड़ा सा मदद करता है और स्पष्ट करता है।