Gözlemlenebilir bir dizinin uzunluğu nasıl kontrol edilir

Angular 2 bileşenimde bir Gözlemlenebilir dizim var

list$: Observable<any[]>;

Şablonumda var

<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>

Ancak $ .length listesi, Gözlemlenebilir dizi durumunda çalışmaz.

Güncelleme:

Görünüşe göre (list $ | async) ?. length bize uzunluğu veriyor, ancak aşağıdaki kod hala çalışmıyor:

<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>

Gözlemlenebilir dizinin uzunluğunu nasıl kontrol edeceğime lütfen rehberlik edebilir.

| asyncBoruyu kullanabilirsiniz :

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

Güncelleme - Açısal Sürüm 6:

Bir css İskeleti yüklüyorsanız, bunu kullanabilirsiniz. Dizide hiç öğe yoksa, css şablonunu görüntüler. Veri varsa 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>

.Ts Dosyaları için bir çözüm:

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

Angular 4+ için bunu deneyin

<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>

Bu cevap doğru olsa da

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

Arka ucu aramak için http istemcisini kullanıyorsanız (çoğu durumda bunu yaparsınız), birden fazla listeniz varsa API'nize yinelenen aramalar alacağınızı unutmayın $ | eşzamansız . Bunun nedeni her biri | async boru $ gözlemlenebilir listenize yeni abone oluşturacaktır.

Bu benim için çalıştı -

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

Verilerimi httpClient async'den alıyorum.

Buradaki diğer tüm seçenekler benim için işe yaramadı, bu da hayal kırıklığı yarattı. Özellikle seksi (list $ | async) boru.

Basa ..

Buradaki yaklaşımınızın başka bir önemli sorunu var: şablonunuzda eşzamansız boruyu tekrar tekrar kullanarak, aslında tek bir Observable için birçok aboneliği başlatmış oluyorsunuz.

KAMRUL HASAN SHAHED yukarıda doğru yaklaşıma sahiptir: Eşzamansız boruyu bir kez kullanın ve ardından sonuç için alt düğümlerde yararlanabileceğiniz bir takma ad sağlayın.

Kısaltılabilir:

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

Parantezden önce ünlem işaretini kullanmanız yeterlidir.

iyonik 4

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

$işareti kaldırdığımda işe yaradı