Angular2 * ngIf vérifier la longueur du tableau d'objets dans le modèle

Référé à https://angular.io/docs/ts/latest/guide/displaying-data.html et de la pile Comment vérifier objet vide dans le modèle angulaire 2 en utilisant * ngIf encore obtenir l' auto contexte d'erreur de syntaxe non défini. Si je supprime la condition * ngIf, j'obtiens des valeurs dans teamMembers si j'y insère une valeur afin que je puisse accéder aux valeurs de teamMembers.

mon teamMemberobjet est que [ ] arrayj'essaie de vérifier que le tableau de conditions est vide de taille.

Essaye:

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

et

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

Composant:

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

Toute aide est la bienvenue.

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

Ce premier vérifie si teamMembersa une valeur et si teamMembersne pas une valeur, il ne tente pas d'accéder lengthde undefinedparce que la première partie de la condition échoue déjà.

Vous pouvez utiliser *ngIf="teamMembers != 0"pour vérifier si des données sont présentes

Peut-être une légère exagération, mais la bibliothèque créée ngx-if-empty-or-has-items vérifie si un objet, un ensemble, une carte ou un tableau n'est pas vide. Peut-être que cela aidera quelqu'un. Il a la même fonctionnalité que ngIf (la syntaxe then, else et 'as' est prise en charge).

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>

Vous pouvez utiliser

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

Sans event.attendees?.length > 0ou mêmeevent.attendees?length != 0

Parce que ?.lengthdéjà retourner la valeur booléenne .

Si dans le tableau sera quelque chose, il ne l'affichera pas autrement.

Cet article m'a beaucoup aidé à comprendre pourquoi cela ne fonctionnait pas non plus pour moi. Cela me donne une leçon pour penser au chargement de la page Web et à la façon dont angular 2 interagit en tant que chronologie et pas seulement au moment auquel je pense. Je n'ai vu personne d'autre mentionner ce point, alors je vais ...

La raison pour laquelle le * ngIf est nécessaire parce qu'il essaiera de vérifier la longueur de cette variable avant que le reste du truc OnInit ne se produise, et lèvera l'erreur "longueur non définie". Alors c'est pourquoi vous ajoutez le? parce qu'il n'existera pas encore, mais il le sera bientôt