In my Angular 2 component I have an Observable array
list$: Observable<any[]>;
In my Template I have
<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>
But list$.length doesn't work with in case of Observable array.
Update:
It seems that (list$ | async)?.length gives us the length but the below code still doesn't work:
<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>
Can anyone please guide how do I check length of Observable array.
You can use the | async pipe:
<div *ngIf="(list$ | async)?.length==0">No records found.</div>
Update - Angular Version 6:
If you are loading up a css Skeleton you can use this. If the array has no items it will display the css template. If there is data then fill out the 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>
A solution for .ts-Files:
this.list.subscribe(result => {console.log(result.length)});
For Angular 4+, try this
<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>
While this answer is correct
<div *ngIf="(list$ | async)?.length === 0">No records found.</div>
Keep in mind that if you are using http client to call backend (in most cases you do) you will get duplicate calls to your API if you have more that one list$ | async. This is because each | async pipe will create new subscriber to your list$ observable.
This is what worked for me -
*ngIf="!photos || photos?.length===0"
I am getting my data from httpClient async.
All the other options here didn't work for me which was disappointing. Especially the sexy (list$ | async) pipe.
Basa..
Your approach here has another major issue: by leveraging the async pipe over and over in your template, you are actually kicking off that many subscriptions to the single Observable.
KAMRUL HASAN SHAHED has the right approach above: Use the async pipe once and then provide an alias for the result that you can leverage in child nodes.
来源：https://stackoverflow.com/questions/38057537/how-to-check-the-length-of-an-observable-array