관찰 가능한 배열의 길이를 확인하는 방법

관찰 가능한 배열의 길이를 확인하는 방법

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>

그러나 List$.length는 Observable 배열의 경우에는 작동하지 않습니다.

업데이트:

(list$ | 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>

업데이트 - 2021-2-17

<ul *ngIf="(list$| async) as list; else loading">
   <li *ngFor="let listItem of list">
      {{ listItem.text }}
   </li>
</ul>

<ng-template #loading>
  <p>Shows when no data, waiting for Api</p>
  <loading-component></loading-component>
</ng-template>

업데이트 - 각도 버전 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 client를 사용하여 백엔드를 호출하는 경우(대부분의 경우 호출) 하나 이상의 list$ | async가 있으면 API에 대한 중복 호출이 수신됩니다.이는 각 | 비동기 파이프가 관찰 가능한 목록 $에 대한 새 구독자를 생성하기 때문입니다.

단축할 수도 있습니다.

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

괄호 앞에 느낌표를 사용하면 됩니다.

이게 제게 효과가 있었던 겁니다

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

저는 httpClient 비동기식에서 데이터를 받고 있습니다.

여기 있는 다른 옵션들은 모두 제게 효과가 없어서 실망스러웠습니다.특히 섹시한 (list$ | async) 파이프.

바사..

나는 이 문제를 가지고 있었습니다.Observable<Customer[]>(생성자에서 초기화됨) ar 길이가 비어 있을 때 컨테이너 div를 숨기려고 할 때 "객체가 정의되지 않았을 수 있습니다"라고 말합니다. 그래서 저는 이렇게 했습니다.<div *ngIf="(similarCustomers$ | async)?.length > 0">

제 동료는 다음과 같은 방법으로 문제를 해결했습니다.

<div *ngIf="(similarCustomers$ | async) as similarCustomers">
  <ng-container *ngIf="similarCustomers.length > 0">

이온성 4

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

제가 그것을 제거했을 때 작동했습니다.$서명하다

언급URL : https://stackoverflow.com/questions/38057537/how-to-check-the-length-of-an-observable-array