วิธีตรวจสอบความยาวของอาร์เรย์ที่สังเกตได้

ในองค์ประกอบ 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 array

อัปเดต:

ดูเหมือนว่า(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>

ใครช่วยแนะนำวิธีตรวจสอบความยาวของอาร์เรย์ที่สังเกตได้

คุณสามารถใช้| asyncท่อ:

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

อัปเดต - Angular เวอร์ชัน 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-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 ของคุณหากคุณมีมากกว่าหนึ่งรายการ $ | async นี่เป็นเพราะแต่ละ | ท่อ async จะสร้างสมาชิกใหม่ในรายการของคุณ $ สังเกตได้

นี่คือสิ่งที่ได้ผลสำหรับฉัน -

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

ฉันได้รับข้อมูลจาก httpClient async

ตัวเลือกอื่น ๆ ทั้งหมดที่นี่ไม่ได้ผลสำหรับฉันซึ่งน่าผิดหวัง โดยเฉพาะท่อ sexy (list $ | async).

บาซา ..

แนวทางของคุณมีปัญหาสำคัญอีกประการหนึ่ง: โดยการใช้ประโยชน์จากท่อ async ซ้ำแล้วซ้ำอีกในเทมเพลตของคุณคุณกำลังเริ่มต้นการสมัครสมาชิกจำนวนมากสำหรับ Observable เดียว

KAMRUL HASAN SHAHED มีแนวทางที่ถูกต้องข้างต้น: ใช้ async ไปป์หนึ่งครั้งจากนั้นระบุนามแฝงสำหรับผลลัพธ์ที่คุณสามารถใช้ประโยชน์จากโหนดลูกได้

สามารถย่อได้เช่นกัน:

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

เพียงใช้เครื่องหมายตกใจก่อนวงเล็บ

ไอออนิก 4

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

มันใช้งานได้เมื่อฉันลบ$เครื่องหมายออก