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

Question

Référé à https://angular.io/docs/ts/latest/guide/displaying-data.html et empiler Comment vérifier un objet vide dans un modèle angulaire 2 en utilisant *ngIf Je reçois toujours l'erreur de syntaxe self context undefined. Si je supprime la condition *ngIf, j'obtiens des valeurs dans les membres de l'équipe si je pousse une valeur dans cette condition afin de pouvoir accéder aux valeurs dans les membres de l'équipe.

mon teamMember L'objet est [ ] array J'essaie de vérifier si le tableau est vide par taille.

Essais :

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

y

<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 serait la bienvenue.

Answer 1

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

Il vérifie d'abord si teamMembers a une valeur et si teamMembers n'a pas de valeur, elle n'essaie pas d'accéder à length de undefined car la première partie de la condition échoue déjà.

Answer 2

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

Answer 3

Vous pouvez utiliser

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

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

Parce que ?.length déjà rendu boolean valeur.

Si le tableau contient quelque chose, il l'affichera, sinon il ne le fera pas.

Answer 4

Peut-être un peu trop, mais la bibliothèque créée ngx-if-empty-or-has-items il vérifie si un objet, un ensemble, une carte ou un tableau n'est pas vide. Peut-être cela aidera-t-il quelqu'un. Il a la même fonctionnalité que ngIf (les syntaxes then, else et 'as' sont supportées).

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>

Answer 5

Cet article m'a beaucoup aidé à comprendre pourquoi ça ne marchait pas pour moi non plus. Il m'a donné une leçon pour penser au chargement de la page web et à la façon dont angular 2 interagit comme une ligne de temps et pas seulement le point dans le temps 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 est qu'il essaiera de vérifier la longueur de cette variable avant que le reste de l'activité OnInit ne se produise, et lancera l'erreur "length undefined". C'est pourquoi vous ajoutez le ? parce qu'il n'existe pas encore, mais il existera bientôt.