Angular2 * ngIf periksa panjang larik objek di templat

Merujuk ke https://angular.io/docs/ts/latest/guide/displaying-data.html dan tumpukan Bagaimana memeriksa objek kosong di template sudut 2 menggunakan * ngIf masih mendapatkan konteks diri kesalahan sintaks tidak ditentukan. Jika saya menghapus kondisi * ngIf maka saya mendapatkan nilai di teamMembers jika saya memasukkan beberapa nilai ke dalamnya sehingga saya dapat mengakses nilai di teamMembers.

teamMemberobjek saya adalah [ ] arraysaya mencoba untuk memeriksa array kondisi kosong menurut ukuran.

Mencoba:

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

dan

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

Komponen:

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

Bantuan apa pun akan sangat bagus.

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

Cek ini pertama jika teamMembersmemiliki nilai dan jika teamMemberstidak memiliki nilai, tidak mencoba untuk mengakses lengthdari undefinedkarena bagian pertama dari kondisi yang sudah gagal.

Anda dapat menggunakan *ngIf="teamMembers != 0"untuk memeriksa apakah ada data

Mungkin sedikit berlebihan tetapi membuat perpustakaan ngx-if-empty-or-has-items itu memeriksa apakah sebuah objek, set, peta atau array tidak kosong. Mungkin itu akan membantu seseorang. Ini memiliki fungsionalitas yang sama dengan ngIf (maka, else dan sintaks 'as' didukung).

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>

Kamu bisa memakai

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

Tanpa event.attendees?.length > 0atau bahkanevent.attendees?length != 0

Karena ?.lengthsudah mengembalikan nilai boolean .

Jika dalam array akan menjadi sesuatu itu akan menampilkannya yang lain tidak.

Artikel ini banyak membantu saya mencari tahu mengapa itu tidak berhasil untuk saya juga. Ini memberi saya pelajaran untuk memikirkan pemuatan halaman web dan bagaimana sudut 2 berinteraksi sebagai garis waktu dan bukan hanya titik waktu yang saya pikirkan. Saya tidak melihat orang lain menyebutkan hal ini, jadi saya akan ...

Alasan * ngIf diperlukan karena ia akan mencoba memeriksa panjang variabel itu sebelum sisa OnInit terjadi, dan memunculkan kesalahan "length undefined". Jadi itu sebabnya Anda menambahkan? karena itu belum ada, tapi akan segera.