Bagaimana memeriksa panjang array yang dapat diamati

109

Dalam komponen Angular 2 saya, saya memiliki array yang dapat diamati

list$: Observable<any[]>;

Di Template saya, saya punya

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

Tetapi list $ .length tidak berfungsi jika ada array Observable.

Memperbarui:

Tampaknya (list $ | async) ?. length memberi kita panjang tetapi kode di bawah ini masih tidak berfungsi:

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

Adakah yang bisa memandu bagaimana cara memeriksa panjang array yang dapat diamati.

angular observable angular2-template angular2-services Naveed Ahmed
sumber
Dilaporkan di github.com/angular/angular/issues/9641
Günter Zöchbauer

Jawaban:

179

Anda bisa menggunakan | asyncpipa:

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

Pembaruan - Angular Versi 6:

Jika Anda memuat kerangka css, Anda dapat menggunakan ini. Jika array tidak memiliki item, itu akan menampilkan template css. Jika ada data isikan 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>
Günter Zöchbauer
sumber
4
Saya mencobanya juga tetapi memberikan kesalahan "TypeError: Tidak dapat membaca properti 'panjang' dari null"
Naveed Ahmed
3
Sulit untuk diketahui dari informasi yang Anda berikan. Coba <div *ngIf="(list$ | async)?.length==0">No records found.</div>(ditambahkan ?)
Günter Zöchbauer
6
Saya mencoba ini dan berhasil <div * ngIf = "(list $ | async) ?. length == 0"> Tidak ada catatan yang ditemukan. </div>
Naveed Ahmed
3
Tambahan ?diperlukan karena list$hanya disetel setelah Angular2 mencoba merender tampilan untuk pertama kalinya. ?mencegah sisa sub-ekspresi dievaluasi hingga bagian kiri ?menjadi != null(Elvis atau operator navigasi aman).
Günter Zöchbauer
1
@ GünterZöchbauer menurut saya, asyncpipa pertama menyelesaikan data dan oleh karena itu asyncpipa berikutnya pada loop saya tidak menampilkan apa pun. Atau mungkin *ngIfmembuat cakupan tambahan dan karena itu tidak berfungsi. Sulit dikatakan. Tetapi sementara loop saya dibungkus di dalam if, itu tidak menampilkan data apa pun. Jika mengevaluasi dengan truebenar.
Eugene
31

Solusi untuk .ts-Files:

     this.list.subscribe(result => {console.log(result.length)});
Kosong
sumber
bukankah perlu segera berhenti berlangganan setelahnya?
Peter
Lebih baik berhenti berlangganan dari observasi pada onDestroykomponen
ThPadelis
16

Untuk Angular 4+, coba ini

<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>
MD KAMRUL HASAN SHAHED
sumber
7

Padahal jawaban ini benar

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

Perlu diingat bahwa jika Anda menggunakan klien http untuk memanggil backend (dalam banyak kasus Anda melakukannya), Anda akan mendapatkan panggilan duplikat ke API Anda jika Anda memiliki lebih dari satu daftar $ | async . Ini karena masing-masing | pipa async akan membuat pelanggan baru ke daftar Anda $ observable.

Andzej Maciusovic
sumber
4

Inilah yang berhasil untuk saya - 

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

Saya mendapatkan data saya dari httpClient async.

Semua opsi lain di sini tidak berfungsi untuk saya yang mengecewakan. Terutama pipa seksi (daftar $ | asinkron).

Basa ..

Tzvi Gregory Kaidanov
sumber
2

Pendekatan Anda di sini memiliki masalah besar lainnya: dengan memanfaatkan pipa asinkron berulang kali di templat Anda, Anda sebenarnya memulai banyak langganan ke satu Observable.

KAMRUL HASAN SHAHED memiliki pendekatan yang benar di atas: Gunakan pipa asinkron satu kali dan kemudian berikan alias untuk hasil yang dapat Anda manfaatkan di node anak.

Harry Beckwith
sumber
1

Bisa disingkat juga: 

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

Cukup gunakan tanda seru sebelum tanda kurung.

Daniyal Lukmanov
sumber
-3

ionik 4

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

itu berhasil ketika saya menghapus $tanda itu

Ahmed Al-hajri
sumber