Cómo comprobar la longitud de una matriz observable

En mi componente Angular 2 tengo una matriz observable

list$: Observable<any[]>;

En mi plantilla tengo

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

Pero list $ .length no funciona en el caso de una matriz observable.

Actualizar:

Parece que (list $ | async) ?. length nos da la longitud, pero el siguiente código aún no funciona:

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

¿Alguien puede orientarme sobre cómo verificar la longitud de la matriz observable?

Puedes usar la | asynctubería:

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

Actualización - Versión angular 6:

Si está cargando un esqueleto css, puede usar esto. Si la matriz no tiene elementos, mostrará la plantilla css. Si hay datos, complete el 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>

Una solución para .ts-Files:

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

Para Angular 4+, prueba esto

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

Si bien esta respuesta es correcta

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

Tenga en cuenta que si está utilizando un cliente http para llamar al backend (en la mayoría de los casos lo hace), obtendrá llamadas duplicadas a su API si tiene más de una lista $ | async . Esto se debe a que cada | async pipe creará un nuevo suscriptor a su lista $ observable.

Esto es lo que funcionó para mí:

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

Obtengo mis datos de httpClient async.

Todas las otras opciones aquí no funcionaron para mí, lo cual fue decepcionante. Especialmente la tubería sexy (list $ | async).

Basa ..

Su enfoque aquí tiene otro problema importante: al aprovechar la tubería asíncrona una y otra vez en su plantilla, en realidad está iniciando tantas suscripciones al único Observable.

KAMRUL HASAN SHAHED tiene el enfoque correcto anterior: use la tubería asíncrona una vez y luego proporcione un alias para el resultado que puede aprovechar en los nodos secundarios.

También se puede acortar:

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

Simplemente use el signo de exclamación antes del paréntesis.

iónico 4

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

funcionó cuando quité el $letrero