Angular2 * ngIf ตรวจสอบความยาวอาร์เรย์วัตถุในเทมเพลต

อ้างถึงhttps://angular.io/docs/ts/latest/guide/displaying-data.htmlและกองซ้อนวิธีตรวจสอบวัตถุว่างในเทมเพลตเชิงมุม 2 โดยใช้ * ngIfยังคงได้รับข้อผิดพลาดทางไวยากรณ์ไม่ได้กำหนดบริบทด้วยตนเอง ถ้าฉันลบเงื่อนไข * ngIf ฉันจะได้รับค่าใน teamMembers ถ้าฉันใส่ค่าบางอย่างเข้าไปเพื่อให้ฉันสามารถเข้าถึงค่าใน teamMembers ได้

teamMemberวัตถุของ[ ] arrayฉันฉันกำลังพยายามตรวจสอบอาร์เรย์เงื่อนไขว่างเปล่าตามขนาด

ความพยายาม:

<div class="row" *ngIf="(teamMembers | json) != '{}'">

และ

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

ส่วนประกอบ:

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

ความช่วยเหลือใด ๆ จะดีมาก

<div class="row" *ngIf="teamMembers?.length > 0">

การตรวจสอบนี้ก่อนถ้าteamMembersมีค่าและถ้าteamMembersไม่ได้มีค่าก็ไม่ได้พยายามที่จะเข้าถึงlengthของundefinedเพราะส่วนแรกของสภาพแล้วล้มเหลว

คุณสามารถใช้ *ngIf="teamMembers != 0"เพื่อตรวจสอบว่ามีข้อมูลอยู่หรือไม่

อาจจะ overkill เล็กน้อย แต่สร้างไลบรารีngx-if-empty-or-has-items ซึ่งจะตรวจสอบว่าวัตถุชุดแผนที่หรืออาร์เรย์ไม่ว่างเปล่า บางทีมันอาจจะช่วยใครสักคน มีฟังก์ชันการทำงานเช่นเดียวกับ ngIf (จากนั้นรองรับไวยากรณ์อื่นและ 'as')

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>

คุณสามารถใช้ได้

<div class="col-sm-12" *ngIf="event.attendees?.length">

ไม่มีevent.attendees?.length > 0หรือแม้กระทั่งevent.attendees?length != 0

เพราะ?.lengthส่งคืนค่าบูลีนแล้ว

ถ้าในอาร์เรย์จะเป็นสิ่งที่จะแสดงเป็นอย่างอื่นไม่

บทความนี้ช่วยฉันได้มากในการหาสาเหตุว่าทำไมมันถึงไม่ได้ผลสำหรับฉัน ให้บทเรียนแก่ฉันในการคิดถึงการโหลดหน้าเว็บและวิธีการที่เชิงมุม 2 โต้ตอบเป็นไทม์ไลน์ไม่ใช่แค่ประเด็นในเวลาที่ฉันกำลังคิด ฉันไม่เห็นใครพูดถึงประเด็นนี้อีกดังนั้นฉันจะ ...

สาเหตุที่ต้องใช้ * ngIf เนื่องจากจะพยายามตรวจสอบความยาวของตัวแปรนั้นก่อนที่สิ่งที่เหลือของ OnInit จะเกิดขึ้นและส่งข้อผิดพลาด "length undefined" นั่นคือเหตุผลที่คุณเพิ่ม? เพราะมันยังไม่มีอยู่จริง แต่อีกไม่นาน