Como verificar o comprimento de uma matriz observável

No meu componente Angular 2, tenho uma matriz observável

list$: Observable<any[]>;

No meu modelo eu tenho

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

Mas list $ .length não funciona no caso de array Observable.

Atualizar:

Parece que (list $ | async) ?. length nos dá o comprimento, mas o código abaixo ainda não 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>

Alguém pode orientar como faço para verificar o comprimento da matriz Observable.

Você pode usar o | asynctubo:

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

Atualização - Versão Angular 6:

Se você estiver carregando um esqueleto css, poderá usá-lo. Se a matriz não tiver itens, ela exibirá o modelo css. Se houver dados, preencha 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>

Uma solução para arquivos .ts:

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

Para Angular 4+, experimente isto

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

Embora esta resposta esteja correta

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

Lembre-se de que se estiver usando um cliente http para chamar backend (na maioria dos casos você faz), obterá chamadas duplicadas para sua API se tiver mais de uma lista $ | assíncrono . Isso ocorre porque cada | O pipe assíncrono criará um novo assinante para sua lista $ observable.

Isto é o que funcionou para mim -

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

Estou recebendo meus dados de httpClient async.

Todas as outras opções aqui não funcionaram para mim, o que foi decepcionante. Especialmente o cachimbo sexy (list $ | async).

Basa ..

Sua abordagem aqui tem outro grande problema: ao aproveitar o pipe assíncrono repetidamente em seu modelo, você está na verdade iniciando tantas assinaturas para o único Observable.

KAMRUL HASAN SHAHED tem a abordagem certa acima: use o pipe assíncrono uma vez e, em seguida, forneça um alias para o resultado que você pode aproveitar nos nós filhos.

Também pode ser reduzido:

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

Basta usar o ponto de exclamação antes do parêntese.

iônico 4

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

funcionou quando eu removi o $sinal