@for(...)

הסינטקס החדש של @for שניתן להשתמש בו כדי להחליף את *ngFor זמין מ-Angular 17. הסינטקס החדש הוא הרבה יותר נקי וקל לקריאה וכתיב, וגם עוצמתי יותר.
בואו נסתכל על הדוגמה הבאה ונפרק את התכונות והיתרונות העיקריים של הסינטקס החדש.

old-ngfor.component.tsnew-for.component.tsapp.component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';
import {OldNgForComponent} from './old-ngfor.component';
import {NewForComponent} from './new-for.component';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-root',
standalone: true,
imports: [OldNgForComponent, NewForComponent],
template: `
  <h1>*ngFor -> &#64;for</h1>
	<old-ngfor></old-ngfor>
	<new-for></new-for>
`,
})
export class AppComponent {	
}

Read-only

Open Sandbox

track

בסינטקס החדש של @for חובה לספק את הפרמטר track. על פי התיעוד של Angular, הרבה בעיות בביצועים של אפליקציות Angular נגרמו מלולאות *ngFor ללא trackBy, עכשיו הפרמטר track הוא חובה עם סינטקס פשוט יותר.
כעת ניתן בקלות לבחור Property מהאובייקט, ואנגולר ישתמש בו כדי לעקוב אחרי שינויים במערך.
ניתן גם להשתמש במשתנה הקונטקסט $index כדי לעקוב לפי אינדקס, אבל עדיף להשתמש במפתח ראשי באובייקט ולהשתמש בזה כערך ל track.

בלוק ריק

אחרי הבלוק של @for ניתן להוסיף בלוק של @empty שיתבצע כאשר המערך ריק.
לפני הסינטקס החדש היינו צריכים להשתמש ב-*ngIf כדי לבדוק אם המערך ריק, ואז להציג את הבלוק הריק.

משתנים בקונטקסט

המשתנים בקונטקסט שהיו זמינים ב-*ngFor זמינים גם ב-@for:

• $index - האינדקס של האיבר הנוכחי במערך
• $first - true אם האיבר הנוכחי הוא הראשון במערך
• $last - true אם האיבר הנוכחי הוא האחרון במערך
• $even - true אם האינדקס של האיבר הנוכחי הוא זוגי
• $odd - true אם האינדקס של האיבר הנוכחי הוא אי-זוגי

סיכום

מומלץ להפסיק להשתמש ב-*ngFor ולהשתמש בסינטקס החדש של @for. ישנם כמה יתרונות לשימוש בסינטקס החדש של @for:

• קל יותר להבין את הבלוק של @for
• קל יותר לספק track
• ה- track החובה ימנע בעיות בביצועים
• קל יותר לטפל במצב של מערך ריק