123 votes

Angular 2 ngfor premier, dernier, boucle d'index

J'essaie de définir par défaut la première occurrence dans cet exemple: plunkr

obtenir l'erreur suivante:

 Unhandled Promise rejection: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("dButtonToggleGroup">
                                                            <md-button-toggle [ERROR ->]*ngFor="let indicador of indicadores; #first = first" value="indicador.id" [checked]="first">
      "): ng:///AppModule/HomeComponent.html@35:78
Parser Error: Unexpected token #, expected identifier, keyword, or string at column 31 in [let indicador of indicadores; #first = first] in ng:///AppModule/HomeComponent.html@35:78 ("       <md-button-toggle *ngFor="let indicador of indicadores; #first = first" value="indicador.id" [ERROR ->][checked]="first">
                                                                <span>{{ indicado"): ng:///AppModule/HomeComponent.html@35:153
 

Qu'est-ce qui ne va pas??

242voto

Steveadoo Points 4955

Découvrez ce plunkr.

Lorsque vous êtes à la liaison des variables, vous devez utiliser les crochets. Aussi, vous utilisez le hashtag lorsque vous souhaitez obtenir des références aux éléments dans votre code html, pas pour déclarer des variables à l'intérieur des modèles comme ça.

<md-button-toggle *ngFor="let indicador of indicadores; let first = first;" [value]="indicador.id" [checked]="first"> 
...

Edit: Merci à Christopher Moore: Angulaire expose les variables locales suivantes:

  • index
  • first
  • last
  • even
  • odd

77voto

Voici comment cela se fait dans Angular 6

 <li *ngFor="let user of userObservable ; first as isFirst">
   <span *ngIf="isFirst">default</span>
</li>
 

Notez le changement de let first = first à first as isFirst

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X