page - angular platform browser




如何檢查可觀察數組的長度 (5)

在我的Angular 2組件中,我有一個Observable數組

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>

但是list $ .length在Observable數組中不起作用。

更新:

似乎 (list $ | async)?. length 給了我們長度,但是下面的代碼仍然不起作用:

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

任何人都可以指導我如何檢查Observable數組的長度。


.ts文件的解決方案:

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

也可以縮短:

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

只需在括號前使用感嘆號。


您可以使用 | async | async 管道:

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

更新-Angular版本6:

如果要加載CSS骨架,則可以使用它。 如果數組沒有項目,它將顯示css模板。 如果有數據,請填寫 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>

這就是對我有用的-

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

我正在從httpClient異步獲取數據。

令人失望的是,這裡的所有其他選項都不適合我。 尤其是性感的(list $ | async)管。

巴薩..


雖然這個答案是正確的

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

請記住,如果您使用http客戶端調用後端(在大多數情況下是這樣做的),則如果 列表中 有多個 列表 ,則會重複調用API 異步 這是因為每個| 異步管道將在您的$$可觀察列表中創建新的訂戶。





angular2-services