Observable 배열의 길이를 확인하는 방법

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

그러나 Observable 배열의 경우 list $ .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 배열의 길이를 확인하는 방법을 안내해 주시겠습니까?

| async파이프 를 사용할 수 있습니다 .

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

업데이트-Angular 버전 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>

.ts-Files에 대한 솔루션 :

     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에 대한 중복 호출을 받게됩니다. 비동기 . 이것은 각각 | 비동기 파이프는 귀하의 목록에 새 구독자를 생성합니다.

이것이 나를 위해 일한 것입니다-

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

httpClient 비동기에서 데이터를 얻고 있습니다.

여기에있는 다른 모든 옵션은 실망 스러웠던 나를 위해 작동하지 않았습니다. 특히 섹시한 (list $ | async) 파이프.

바사 ..

여기에서의 접근 방식에는 또 다른 주요 문제가 있습니다. 템플릿에서 비동기 파이프를 반복적으로 활용하면 실제로 단일 Observable에 대한 많은 구독을 시작하게됩니다.

KAMRUL HASAN SHAHED는 위의 올바른 접근 방식을 사용합니다. 비동기 파이프를 한 번 사용한 다음 하위 노드에서 활용할 수있는 결과에 대한 별칭을 제공합니다.

단축 할 수도 있습니다.

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

괄호 앞에 느낌표를 사용하십시오.

이온 4

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

내가 $표지판을 제거했을 때 작동했습니다.