Angulaire io (4) *ngFor premier et le dernier

Je suis en train de dire qu'un élément dans un *ngFor est le premier ou le dernier élément de style un conteneur. Est-il un moyen de faire quelque chose comme cela?

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

Merci pour toute aide offerte!

InformationsquelleAutor Nicholas Fitton | 2017-10-25
  1. 34

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

    • index: numéro: L'index de l'élément courant dans le itératif.
    • première: booléen: True si l'élément est le premier élément de la itératif.
    • dernier: booléen: True si l'élément est le dernier élément de l'objet iterable.
    • même: booléen: True si l'élément a un même indice dans le itératif.
    • impair: booléen: True si l'élément a un index impair dans le itératif.

    Donc:

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

    De la Documentation à 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>
    InformationsquelleAutor Duncan
  2. 6

    Ce la façon dont 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 qui peut être un alias de variables locales:

    • index sera défini à la boucle d'itération pour chaque modèle
      contexte afin de démarrer à partir de 0.

    • first sera réglé à une valeur booléenne indiquant si l'élément est
      le premier dans l'itération.

    • last sera réglé à une valeur booléenne indiquant si l'élément est
      la dernière dans l'itération.

    • even sera réglé à une valeur booléenne indiquant si l'élément a
      un même indice.

    • odd sera réglé à une valeur booléenne indiquant si l'élément a
      un index impair.

    pour plus d'informations : NgFor-directive

    InformationsquelleAutor malbarmawi