Cách kiểm tra độ dài của một mảng có thể quan sát

Trong thành phần Angular 2 của tôi, tôi có một mảng có thể quan sát

list$: Observable<any[]>;

Trong Mẫu của tôi, tôi có

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

Nhưng danh sách $ .length không hoạt động trong trường hợp mảng có thể quan sát được.

Cập nhật:

Có vẻ như (list $ | async) ?. length cho chúng ta độ dài nhưng đoạn mã dưới đây vẫn không hoạt động:

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

Mọi người có thể vui lòng hướng dẫn cách kiểm tra độ dài của mảng có thể quan sát được không.

Bạn có thể sử dụng | asyncđường ống:

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

Cập nhật - Phiên bản Angular 6:

Nếu bạn đang tải lên một Skeleton css, bạn có thể sử dụng nó. Nếu mảng không có mục nào, nó sẽ hiển thị mẫu css. Nếu có dữ liệu thì hãy điền vào 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>

Giải pháp cho .ts-Files:

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

Đối với Angular 4+, hãy thử cái này

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

Trong khi câu trả lời này là đúng

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

Hãy nhớ rằng nếu bạn đang sử dụng ứng dụng khách http để gọi phần phụ trợ (trong hầu hết các trường hợp là như vậy), bạn sẽ nhận được các lệnh gọi trùng lặp đến API của mình nếu bạn có nhiều hơn một danh sách $ | không đồng bộ . Điều này là do mỗi | đường ống không đồng bộ sẽ tạo người đăng ký mới vào danh sách $ có thể quan sát được của bạn.

Đây là những gì làm việc cho tôi -

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

Tôi đang lấy dữ liệu của mình từ không đồng bộ httpClient.

Tất cả các tùy chọn khác ở đây không hoạt động đối với tôi, điều đó thật đáng thất vọng. Đặc biệt là đường ống sexy (list $ | async).

Cá ba sa ..

Cách tiếp cận của bạn ở đây có một vấn đề lớn khác: bằng cách tận dụng lặp đi lặp lại đường ống không đồng bộ trong mẫu của bạn, bạn thực sự đang bắt đầu có nhiều đăng ký cho một Observable duy nhất.

KAMRUL HASAN SHAHED có cách tiếp cận phù hợp ở trên: Sử dụng đường ống không đồng bộ một lần và sau đó cung cấp bí danh cho kết quả mà bạn có thể tận dụng trong các nút con.

Cũng có thể được rút ngắn:

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

Chỉ cần sử dụng dấu chấm than trước ngoặc đơn.

ion 4

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

nó hoạt động khi tôi gỡ bỏ $dấu hiệu