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


89

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.


"jeter une erreur de syntaxe" quel est le message d'erreur exact?
Günter Zöchbauer

EXCEPTION ORIGINALE: TypeError: self.context.teamMembers n'est pas une fonction pour * ngIf = "teamMembers.length> 0" je vais essayer avec la réponse ci-dessous 1 min pls
Karthigeyan Vellasamy

Réponses:


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


3
Voici le lien correct vers le safe navigation operator: angular.io/guide/template-syntax#safe-navigation-operator
Michael Czechowski

Cela peut jeter l'opérateur '>' ne peut pas être appliqué aux types 'boolean' et 'number'. lors de l'optimisation de la construction avec --aot ou prod
krish

18

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


2

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>

1

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.


0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.