web-dev-qa-db-fra.com

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

Reporté à https://angular.io/docs/ts/latest/guide/displaying-data.html and stack Comment vérifier un objet vide dans un modèle angulaire 2 à l'aide de * ngIf toujours en erreur de syntaxe contexte non défini. Si je supprime la condition * ngIf, alors j'obtiens des valeurs dans teamMembers si j'y insère une valeur afin que je puisse accéder aux valeurs dans teamMembers.

mon objet teamMember est [ ] array j'essaie de vérifier que le tableau de conditions est vide par taille.

Essais: 

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

angularangular2-template
59
Karthigeyan
<div class="row" *ngIf="teamMembers?.length > 0">

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

215
Günter Zöchbauer

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

14
AishApp

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 retourne déjà boolean value.

Si dans array sera quelque chose, il l'affichera sinon.

1
Druta Ruslan

Peut-être une légère surcharge mais une 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. Cela aidera peut-être quelqu'un. Il a les mêmes fonctionnalités que ngIf (la syntaxe est alors prise en charge, sinon, et "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>
0
alexKhymenko