एक अवलोकन सारणी की लंबाई की जांच कैसे करें

Question

मेरे कोणीय 2 घटक में मेरे पास एक अवलोकन योग्य सरणी है

list$: Observable<any[]>;

मेरे टेम्पलेट में मेरे पास है

<div *ngIf="list$.length==0">No records found.</div>

<div *ngIf="list$.length>0">
    <ul>
        <li *ngFor="let item of list$ | async">item.name</li>
    </ul>
</div>

लेकिन अवलोकन योग्य सरणी के मामले में $ .length के साथ काम नहीं करता है।

अपडेट करें:

ऐसा लगता है कि (सूची $ | async )-- लंबाई हमें लंबाई देती है लेकिन नीचे का कोड अभी भी काम नहीं करता है:

<div>
    Length: {{(list$ | async)?.length}}
    <div *ngIf="(list$ | async)?.length>0">
        <ul>
            <li *ngFor="let item of (list$ | async)">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

किसी को भी मार्गदर्शन कर सकते हैं कि कैसे मैं अवलोकन योग्य सरणी की लंबाई की जांच कर सकता हूं।

Comments

Github.com/angular/angular/issues/9641

— गुंटर ज़ोचाउर

Answer 1

आप | asyncपाइप का उपयोग कर सकते हैं :

<div *ngIf="(list$ | async)?.length==0">No records found.</div>

अद्यतन - कोणीय संस्करण 6:

यदि आप एक सीएसएस कंकाल लोड कर रहे हैं तो आप इसका उपयोग कर सकते हैं। यदि सरणी में कोई आइटम नहीं है तो यह सीएसएस टेम्पलेट प्रदर्शित करेगा। अगर डेटा है तो भरें ngFor।

<ul *ngIf="(list$| async)?.length > 0; else loading">
   <li *ngFor="let listItem of list$| async">
      {{ listItem.text }}
   </li>
</ul>

<ng-template #loading>
  <p>Shows when no data, waiting for Api</p>
  <loading-component></loading-component>
</ng-template>

Comments

मैंने कोशिश की कि यह भी हो, लेकिन यह त्रुटि देता है "TypeError: null की संपत्ति 'लंबाई' नहीं पढ़ सकता"

— नवेद अहमद

आपके द्वारा प्रदान की गई जानकारी से जानना मुश्किल है। प्रयास करें <div *ngIf="(list$ | async)?.length==0">No records found.</div>(जोड़ा ?)

— गुंटर जोचबॉयर

मैंने यह कोशिश की और यह काम करता है <div * ngIf = "(सूची $ | async)। लंबाई == 0" कोई रिकॉर्ड नहीं मिला। </ div>

— नावेद अहमद

अतिरिक्त ?आवश्यक है क्योंकि Angular2 पहली बार दृश्य को प्रस्तुत करने का प्रयास करने के बादlist$ ही सेट किया गया है । ?शेष सब-एक्सप्रेशन को तब तक मूल्यांकन करने से रोकता है जब तक कि शेष भाग (एल्विस या सुरक्षित-नेविगेशन ऑपरेटर) नहीं ?बन जाता != null।

— गुंटर ज़ोचबॉयर

@ GünterZöchbauer यह मुझे लगता है, कि पहले asyncपाइप डेटा को हल करता है और इसलिए asyncलूप पर मेरा अगला पाइप कुछ भी प्रदर्शित नहीं करता है। या शायद *ngIfएक अतिरिक्त गुंजाइश बनाता है और इसलिए यह काम नहीं कर रहा है। बताना मुश्किल है। लेकिन जब मेरा लूप अंदर लपेटा जाता है अगर, यह कोई डेटा प्रदर्शित नहीं करता है। यदि स्वयं trueसही ढंग से मूल्यांकन करता है।

— यूजीन

Answer 2

.Ts-Files के लिए एक समाधान:

     this.list.subscribe(result => {console.log(result.length)});

Comments

क्या इसके तुरंत बाद सदस्यता समाप्त करना आवश्यक नहीं है?

— पीटर

onDestroyघटक पर

— वेधशालाओं

Answer 3

कोणीय 4+ के लिए, यह प्रयास करें

<div *ngIf="list$ | async;let list">
    Length: {{list.length}}
    <div *ngIf="list.length>0">
        <ul>
            <li *ngFor="let item of list">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

Answer 4

जबकि यह उत्तर सही है

<div *ngIf="(list$ | async)?.length === 0">No records found.</div>

ध्यान रखें कि यदि आप HTTP क्लाइंट का उपयोग बैकएंड पर कॉल करने के लिए कर रहे हैं (ज्यादातर मामलों में जो आप करते हैं) तो आपको अपने एपीआई में डुप्लिकेट कॉल मिलेंगे यदि आपके पास एक सूची $ अधिक है । Async । यह इसलिए है क्योंकि प्रत्येक | async पाइप आपकी सूची में नए ग्राहकों को $ नमूदार बनाएगा।

Answer 5

इसी से मेरा काम बना है -

*ngIf="!photos || photos?.length===0"

मुझे अपना डेटा httpClient async से मिल रहा है।

यहां अन्य सभी विकल्प मेरे लिए कारगर नहीं थे जो निराशाजनक थे। विशेष रूप से सेक्सी (सूची $ | async) पाइप।

बासा ..

Answer 6

यहाँ आपके दृष्टिकोण में एक और प्रमुख मुद्दा है: आपके टेम्पलेट में बार-बार async पाइप का लाभ उठाकर, आप वास्तव में सिंगल ऑब्जर्वेबल के लिए बहुत से सदस्यताएँ निकाल रहे हैं।

KAMRUL HASAN SHAHED के पास ऊपर सही तरीका है: एक बार एसाइंक पाइप का उपयोग करें और फिर परिणाम के लिए एक उपनाम प्रदान करें कि आप बच्चे के नोड्स में लाभ उठा सकते हैं।

Answer 7

साथ ही छोटा किया जा सकता है:

<div *ngIf="!(list$ | async)?.length">No records found.</div>

कोष्ठक से पहले विस्मयादिबोधक चिह्न का उपयोग करें।

Answer 8

आयनिक ४

<div *ngIf="(items | async)?.length==0">No records found.</div>

यह काम किया जब मैंने $साइन हटा दिया