Angular2 * ng Se controlla la lunghezza dell'array di oggetti nel modello

Riferito a https://angular.io/docs/ts/latest/guide/displaying-data.html e stack Come controllare un oggetto vuoto nel modello angular 2 usando * ngSe si ottiene ancora l'errore di sintassi contesto di sé non definito. Se rimuovo la condizione * ngIf, ottengo valori in teamMembers se inserisco un valore in esso in modo da poter accedere ai valori in teamMembers.

il mio teamMemberoggetto è che [ ] arraysto cercando di verificare che l'array di condizioni sia vuoto per dimensione.

Cerca :

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

e

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

Componente :

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

Qualsiasi aiuto sarebbe grande.

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

Questa prima se i controlli teamMembersha un valore e se teamMembersnon ha un valore, non cercare di accesso lengthdel undefinedperché la prima parte della condizione fallisce già.

È possibile utilizzare *ngIf="teamMembers != 0"per verificare se i dati sono presenti

Forse un po 'eccessivo ma la libreria creata ngx-if-empty-or-has-items controlla se un oggetto, un insieme, una mappa o un array non è vuoto. Forse aiuterà qualcuno. Ha la stessa funzionalità di ngIf (è supportata la sintassi then, else e '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>

Puoi usare

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

Senza event.attendees?.length > 0o addiritturaevent.attendees?length != 0

Perché ?.lengthgià restituisce un valore booleano .

Se nell'array ci sarà qualcosa, lo visualizzerà altrimenti no.

Questo articolo mi ha aiutato molto a capire perché non funzionava neanche per me. Mi dà una lezione per pensare al caricamento della pagina web e al modo in cui Angular 2 interagisce come una linea temporale e non solo il momento a cui sto pensando. Non ho visto nessun altro menzionare questo punto, quindi ...

Il motivo per cui * ngIf è necessario perché proverà a controllare la lunghezza di quella variabile prima che accada il resto delle cose di OnInit, e genererà l'errore "length undefined". Quindi è per questo che aggiungi? perché ancora non esiste, ma presto.