Як перевірити довжину масиву, що спостерігається

У своєму компоненті Angular 2 у мене є масив, що спостерігається

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 не працює у випадку масиву, що спостерігається

Оновлення:

Здається, що (список $ | async) ?. довжина дає нам довжину, але наведений нижче код все ще не працює:

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

Хто-небудь, будь ласка, вкажіть, як я перевіряю довжину масиву, що спостерігається

Ви можете використовувати | asyncтрубу:

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

Оновлення - кутова версія 6:

Якщо ви завантажуєте css Skeleton, ви можете використовувати це. Якщо в масиві немає елементів, він відобразить шаблон 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>

Рішення для .ts-файлів:

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

Для 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>

Хоча ця відповідь правильна

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

Майте на увазі, що якщо ви використовуєте http-клієнт для виклику бекенда (у більшості випадків ви це робите), ви отримаєте повторювані дзвінки до свого API, якщо у вас є більше одного списку $ | асинхронізація . Це тому, що кожен | async pipe створить нового абонента на ваш список $ спостерігається.

Це те, що працювало для мене -

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

Я отримую свої дані від httpClient async.

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

Баса ..

Ваш підхід тут має ще одну головну проблему: використовуючи асинхронну трубку знову і знову у вашому шаблоні, ви фактично стартуєте за те, що багато підписок на єдиний спостерігається.

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

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

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

Просто скористайтесь знаком оклику перед дужками.

іонний 4

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

це спрацювало, коли я зняв $знак