Hur man använder index i @for i HTML Angular 18

Hur kan jag definiera index-variabeln i @for i Angular 17

const users = [
    { id: 1, name: 'Ali' },
    { id: 2, name: 'reza' },
    { id: 3, name: 'jack' },
  ];

<ul>
  @for (user of users; track user.id; let i = index) {
  <li>{{ user.name + i }}</li>
  } @empty {
  <span>Empty list of users</span>
  }
</ul>

index är inte känt som vi hade i *ngFor och fick Okänd "let"-parametervariabel "index" i Angular17 @for

Men följande fungerar:

<ul>
  <li *ngFor="let user of users; let i = index">{{ user.name + i }}</li>
</ul>

Svar #1

Bara $ saknades, det borde vara $index istället för index. Det finns också några andra kontextuella variabler snarare än $index REF:

VariabelBetydelse
$countAntal objekt i en samling som itereras över
$indexIndex för den aktuella raden
$firstOm den aktuella raden är den första raden
$lastOm den aktuella raden är den sista raden
$ävenOm det nuvarande radindexet är jämnt
$uddaOm det nuvarande radindexet är udda

och användningen skulle vara:

@for (item of items; track item.id; let idx = $index, e = $even) {
  Item #{{ idx }}: {{ item.name }}
}

Vi kan också använda vår befintliga mall och köra detta kommando för att migrera till control-flow.

ng g @angular/core:control-flow

Svar #2

Du kan använda $index överallt inom räckvidden för @for-blocket utan att behöva ge det ett alias:

<ul>
  @for (user of users; track user.id) {
     <li>{{ user.name + $index }}</li>
  } @empty {
     <span>Empty list of users</span>
  }
</ul>

Relaterade artiklar