web-dev-qa-db-fra.com

Angular io (4) * ngPour la première et la dernière

J'essaie de dire si un élément dans un *ngFor est le premier ou le dernier élément permettant de styler un conteneur. Y at-il un moyen de faire quelque chose comme ça?

<md-expansion-panel *ngFor="let item of items" *ngClass="{ 'first' : item.isFirst }">
  <content></content>
</md-expansion-panel>

Merci pour toute aide offerte!

angularngfor
21
Nicholas Fitton

À l'intérieur de ngFor, vous avez accès à plusieurs variables:

  • index: numéro: Index de l'élément en cours dans l'itérable.
  • first: boolean: True lorsque l'élément est le premier élément de l'itérable.
  • last: boolean: True lorsque l'élément est le dernier élément de l'itérable.
  • even: boolean: True lorsque l'élément a un index pair dans l'itérable.
  • odd: boolean: True lorsque l'élément a un index impair dans l'itérable.

Alors:

<md-expansion-panel *ngFor="let item of items; first as isFirst"
    *ngClass="{ 'first' : isFirst }">
  <content></content>
</md-expansion-panel>

La documentation sur https://angular.io/api/common/NgForOf donne cet exemple:

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>
39
Duncan

Voici comment vous pouvez le faire:

<md-expansion-panel *ngFor="let item of items; let first = first; 
      let last = last" *ngClass="{ 'first' : first }">
   <content></content>
 </md-expansion-panel>

NgFor fournit plusieurs valeurs exportées pouvant être associées à des variables locales:

  • index sera défini sur l'itération de la boucle actuelle pour chaque contexte de modèle afin qu'il commence à 0.

  • first sera défini sur une valeur booléenne indiquant si l'élément est le premier de l'itération.

  • last sera défini sur une valeur booléenne indiquant si l'élément est le dernier de l'itération.

  • even aura une valeur booléenne indiquant si cet élément a un index pair.

  • odd aura une valeur booléenne indiquant si cet élément a un index impair.

pour plus d'informations: NgFor-directive

7
malbarmawi