Как проверить длину наблюдаемого массива

В моем компоненте 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>

Но список $.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.

Ответ 1

Вы можете использовать | async | async труба:

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

Обновление - угловая версия 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>

Ответ 2

Решение для .ts-Files:

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

Ответ 3

Для Angular 4+ попробуйте это

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

Ответ 4

Пока этот ответ правильный

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

Имейте в виду, что если вы используете http-клиент для вызова бэкэнда (в большинстве случаев вы делаете это), вы получите двойные вызовы вашего API, если у вас более одного списка $ | асинхронный Это потому что каждый | async pipe создаст нового подписчика в вашем списке $ observable.

Ответ 5

Это то, что сработало для меня -

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

Я получаю свои данные от httpClient async.

Все остальные варианты здесь не помогли мне, что было разочаровывающим. Особенно сексуальная (список $ | async) труба.

Баса..

Ответ 6

У вашего подхода есть еще одна важная проблема: используя асинхронный канал снова и снова в вашем шаблоне, вы фактически запускаете столько подписок на один Observable.

KAMRUL HASAN SHAHED имеет правильный подход выше: используйте асинхронный канал один раз, а затем предоставьте псевдоним для результата, который вы можете использовать в дочерних узлах.

Ответ 7

Можно также сократить:

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

Просто используйте восклицательный знак перед скобками.