angular
Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngFor?
W Angular 17 pojawiło się built-it control flow, które zostało ustabilizowane w wersji 18. Są to zamienniki dyrektyw *ngIf (opisaliśmy to tutaj), *ngFor, *ngSwitch.
@for jest odpowiednikiem *ngFor. Przykładowe wykorzystanie:
// *ngFor
<li *ngFor="let item of items; trackBy: trackByFn"></li>
// @for
@for (item of items; track item.id) {
<li></li>
}
track, tak jak wcześniej, łączy dane z konkretnym węzłem w DOM. Powoduje to wzrost wydajności przy operacjach na kolekcji. W *ngFor ustawienie trackBy było opcjonalne, natomiast w @for track jest obowiązkowy.
W ramach @for można używać dodatkowych zmiennych np. $index, $event, $last (więcej informacji na ten temat znajduje się w dokumentacji)
@for (product of products; track product.id; let i = $index, last = $last) {
<li>#: , last row: </li>
}
@for oferuje dodatkowy blok @empty, który pojawia się, gdy kolekcja przekazana do @for jest pusta:
@for (item of items; track item.id) {
<li> </li>
} @empty {
<li> There are no items. </li>
}
Dokumentacja
Podobne wpisy
