Angular2 * ngIf şablondaki nesne dizisi uzunluğunu kontrol edin

Refere https://angular.io/docs/ts/latest/guide/displaying-data.html ve yığını ngIf * kullanarak açısal 2 şablonda boş nesneyi kontrol etme hala sözdizimi hatası kendini bağlam tanımsız alıyorum. * NgIf koşulunu kaldırırsam, takım üyelerindeki değerlere erişmek için ona bir değer eklersem, takım üyelerinden değerler alıyorum.

Benim teamMembernesne olduğunu [ ] arrayben boyutuna göre boş olan durum dizisini kontrol etmek çalışıyorum.

Denemeler:

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

ve

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

Bileşen :

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

Herhangi bir yardım harika olur.

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

İlk Bu kontroller teamMembersbir değere sahiptir ve eğer teamMembersbir değere sahip değil, bu erişmeye çalışmaz lengthait undefinedkoşulu ilk bölümü zaten başarısız olduğundan.

*ngIf="teamMembers != 0"Verilerin mevcut olup olmadığını kontrol etmek için kullanabilirsiniz

Belki biraz abartılı olabilir, ancak bir nesne, küme, harita veya dizinin boş olup olmadığını kontrol eden ngx kütüphanesi oluşturulur . Belki birine yardımcı olur. NgIf ile aynı işlevselliğe sahiptir (o zaman, else ve 'as' sözdizimi desteklenir).

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>

Kullanabilirsiniz

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

Olmadan event.attendees?.length > 0veya hattaevent.attendees?length != 0

Çünkü ?.lengthzaten dönmek boole değeri.

Dizide bir şey olacaksa, başka göstermeyecektir.

Bu makale neden benim için de işe yaramadığını anlamama çok yardımcı oldu. Web sayfasının yüklenmesini ve açısal 2'nin nasıl bir zaman çizelgesi olarak etkileşime girdiğini ve sadece düşündüğüm zaman noktasını değil, nasıl etkileşime girdiğini düşünmek bana bir ders veriyor. Başka kimsenin bu noktadan bahsettiğini görmedim, bu yüzden ...

* NgIf'in gerekli olmasının nedeni, OnInit öğelerinin geri kalanı gerçekleşmeden önce bu değişkenin uzunluğunu kontrol etmeye çalışacak ve "uzunluk tanımsız" hatasını atacaktır. Öyleyse bu yüzden? çünkü henüz var olmayacak, ama yakında olacak.