Angular io (4) * ngFür den ersten und letzten

Question

Ich versuche herauszufinden, ob ein Artikel in einem *ngFor das erste oder letzte Element ist, um einen Container zu stylen. Gibt es eine Möglichkeit, so etwas zu tun?

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

Danke für jede Hilfe angeboten!

Answer 1

Im Inneren des ngFor Sie haben Zugriff auf mehrere Variablen:

• Index: Nummer: Der Index des aktuellen Elements in der iterable.
• first: boolean: True, wenn das Element das erste Element im Iterablen ist.
• last: boolean: Wahr, wenn das Element das letzte Element im iterablen Objekt ist.
• even: boolean: True, wenn das Element einen geraden Index im Iterablen hat.
• odd: boolean: True, wenn das Item einen ungeraden Index im Iterablen hat. So

:

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

Dokumentation bei https://angular.io/api/common/NgForOf gibt folgendes Beispiel:

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

Answer 2

dies, wie Sie es tun können:

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

NgFor mehrere exportierten Werte liefert das kann Alias ​​für lokale Variablen sein:

• Index wird für jede Schablone Kontext der aktuellen Schleifeniteration eingestellt werden, so dass es aus 0 beginnen

• erstes wird in einen booleschen Wert gesetzt werden, der angibt, ob das Element ist die erste, in die Iteration.

• Zuletzt wird auf einen booleschen Wert gesetzt, der angibt, ob das Element das letzte in der Iteration ist.

• wird sogar auf einen booleschen Wert gesetzt, der angibt, ob dieser Artikel einen geraden Index hat.

• Odd wird auf einen booleschen Wert gesetzt, der angibt, ob dieses Element einen ungeraden Index hat.

für weitere Informationen: NgFor-directive