כיצד להשתמש בהנחיית ngFor Angular

Angular משתמש בהנחיות לעיבוד דינמי של רכיבי HTML מסוימים באתר שלך. אחת ההנחיות המבניות שבהן אתה יכול להשתמש היא ngFor.

הנחיית ngFor מאפשרת לך לחזור על אותו בלוק מספר מוגדר של פעמים, או לעבור דרך מערך אובייקטים כדי להציג את הפרטים שלהם. זהו כלי רב עוצמה שאתה יכול אפילו להשתמש בו כדי להציג אובייקטים בתוך אובייקטים אחרים.

יש לו גם פונקציות רבות שיכולות להיות שימושיות בתרחישים ספציפיים. זה כולל מציאת האלמנטים הראשונים והאחרונים או דילוג על פריטים מסוימים.

כיצד להשתמש ב-ngFor כדי לעבור בלולאה במספרים סטטיים

הנחיית ngFor מבוססת על לולאת for, אחד מ לולאות שימושיות רבות בהן JavaScript תומך. החל מהגרסה הנוכחית של Angular (14), תצטרך ליצור מערך הכולל את מספר הפריטים שאתה רוצה לעבור דרכו.

1. אתה יכול ליצור רשימה בתוך הצהרת ngFor עצמה. הקוד הבא יחזור על פסקה חמש פעמים, תוך שימוש באינדקסים 0 עד 4:

   <div *ngFor='תן פריט של [0, 1, 2, 3, 4]; תן i = אינדקס'>
   <ע> זוהי פסקה חוזרת: {{item}} </p>
   </div>

instagram viewer
2. מכיוון שהשיטה לעיל עשויה שלא להתאים למערכים גדולים, אתה יכול גם ליצור מערך באופן דינמי בקובץ TypeScript:

   יְצוּא מעמדמחלקה לדוגמהמיישםOnInit{
    מספרים: מערך<מספר> = [];
   בַּנַאִי() {
   // פעולה זו תיצור באופן דינמי את המערך הבא:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   זֶה.numbers = מַעֲרָך(10).למלא(1).map((x, i)=>i);
    }
   }

3. לאחר מכן תוכל לעבור בלולאה דרך מערך המספרים ב-HTML:

   <div *ngFor='תן פריט מספרים; תן i = אינדקס'>
   <ע>זוהי פסקה חוזרת: {{item}}</p>
   </div>

כיצד לדלג או לסגנן מספרים מסוימים

אתה יכול להשתמש ב מוזר אוֹ אֲפִילוּ ngעבור משתנים לקביעת כל מספר שני. תרחיש שבו אתה עשוי למצוא את זה שימושי הוא אם אתה רוצה לעצב כל שורה אי-זוגית או אפילו בטבלה באמצעות צבע אחר.

1. בקובץ CSS עבור רכיב, הוסף כמה מחלקות CSS חדשות. אלה הסגנונות שבהם תשתמש עבור אלמנטים מסוימים באינדקסים זוגיים או אי זוגיים:

   .אָדוֹם {
    צבע אדום;
   }
   .כָּחוֹל { 
    צבע כחול; 
   }
   

2. הכריז על משתנים אי-זוגיים וזוגיים בתוך המשפט ngFor. אלו משתנים ש-Angular יזהה. הקצה את מחלקת ה-CSS האדומה למספרים זוגיים ואת מחלקת ה-CSS הכחולה למספרים אי-זוגיים:

   <div *ngFor='תן פריט מספרים; תן אי-זוגי = אי-זוגי; לתת אפילו = אפילו' [ngClass]="{אדום: זוגי, כחול: מוזר}">
   <ע> זוהי פסקה חוזרת: {{item}} </p>
   </div>

3. הפעל את אתר Angular שלך באמצעות לשרת ופתח אותו בדפדפן האינטרנט. רכיבי HTML זוגיים ואי-זוגיים יתחלפו בין הסגנונות השונים בהתבסס על מחלקת ה-CSS שלהם:
4. אם אתה רוצה לדלג לחלוטין על כל מספר זוגי, אתה יכול להשתמש בהנחיית ngIf. זה ידלג על כל המספרים האי-זוגיים ויציג רק מספרים זוגיים:

   <div *ngFor='תן פריט מספרים; לתת אפילו = אפילו'>
   <p *ngIf='אֲפִילוּ'> זוהי פסקה חוזרת: {{item}} </p>
   </div>

איך לספור אחורה

כדי לספור לאחור, אתה יכול להשתמש בשיטות מסורתיות כמו היפוך רשימה או ספירה לאחור דרך הלולאה באמצעות אינדקס.

1. הכריז על משתנה אינדקס במשפט ngFor. בתוך ה-ngFor, התחל מאורך המערך והוריד את מספר הפריטים שכבר עברת בלולאה:

   <div *ngFor="תן פריט מספרים; תן i = אינדקס;">
   <ע> זוהי פסקה חוזרת: {{numbers.length-i-1}} </p>
   </div>

2. אתה יכול גם ליצור רשימה הפוכה בקובץ TypeScript:

   יְצוּא מעמדמחלקה לדוגמהמיישםOnInit{
    מספרים: מערך<מספר> = [];
    reversedList: מערך<מספר> = [];
   בַּנַאִי() {
   זֶה.numbers = מַעֲרָך(10).למלא(1).map((x, i)=>i);
   זֶה.reversedList = זֶה.numbers.slice().reverse();
    }
   }

3. חזור על הרשימה ההפוכה באמצעות ה-ngFor:

   <div *ngFor='תן פריט של reversedList; תן i = אינדקס'>
   <ע> זוהי פסקה חוזרת: {{item}} </p>
   </div>

איך לעצב את האלמנט הראשון והאחרון בצורה שונה

אתה יכול לסגנן את האלמנט הראשון והאחרון בנפרד מהאלמנטים האחרים באמצעות ה- ראשון ו אחרון משתנים זוויתיים. זוהי אלטרנטיבה ל שימוש ב-CSS psuedo-classes כמו :ילד ראשון.

1. במשפט ngFor, הכריז על המשתנים הראשון והאחרון. השתמש בהנחיית ngClass כדי להקצות את מחלקות ה-CSS הכחולות והאדומות בשלבים הקודמים. הקצה את מחלקת ה-CSS הכחולה לאלמנט הראשון, ואת מחלקת ה-CSS האדומה לאלמנט האחרון:

   <div *ngFor='תן פריט מספרים; תן ראשון = ראשון; לתת להימשך = האחרון' [ngClass]= "{כחול: ראשון, אדום: אחרון}">
   <ע> זוהי פסקה חוזרת: {{item}} </p>
   </div>

כיצד להשתמש ב-ngFor כדי לחזור על אובייקטים

אתה יכול להשתמש בהנחיית ngFor כדי לעבור דרך אובייקטים ולגשת למשתנים האישיים שלהם.

1. צור רשימה של אובייקטים בקובץ TypeScript. במקרה זה, תהיה רשימה של אנשים עם הפרטים שלהם:

   יְצוּא מעמדמחלקה לדוגמהמיישםOnInit{
    אנשים = []; 
   בַּנַאִי() {
   זֶה‎.people = [
    { שם פרטי: 'ג'ון', שם משפחה: 'נַפָּח', כיבוש: 'מנהל משאבי אנוש', תאריך התחלה: תאריך חדש("2019-02-05") },
    { שם פרטי: 'מרי', שם משפחה: 'ג'ונסון', כיבוש: 'קצין טכני', תאריך התחלה: תאריך חדש("2016-01-07") },
    { שם פרטי: 'וויליאם', שם משפחה: 'חום', כיבוש: 'קצין משאבי אנוש', תאריך התחלה: תאריך חדש("2018-03-03") },
    ];
    }
   }

2. ב-HTML, השתמש בלולאת ngFor כדי לעבור דרך רשימת האנשים. כל אדם יהיה נגיש באמצעות אדם מִשְׁתַנֶה. אתה יכול להשתמש במשתנה האדם כדי לגשת לתכונות של כל אדם:

   <div *ngFor='תן אדם של אנשים; תן i = אינדקס'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <ע> {{person.occupation}} </p>
   <ע> {{person.startDate}} </p>
   </div>

כיצד להשתמש ב-ngFor מקונן כדי להציג אובייקטים בתוך אובייקטים אחרים

אתה יכול להשתמש בלולאה מקוננת להצגת אובייקטים בתוך אובייקטים אחרים.

1. שנה את רשימת האנשים. לכל אדם תהיה רשימת אנשי קשר לשעת חירום. אחסן כל איש קשר חירום כאובייקט נפרד:

   זֶה‎.people = [
    {
    שם פרטי: 'ג'ון',
    שם משפחה: 'נַפָּח',
    אנשי קשר חירום: [
    { שם: 'אמנדה סמית'', מערכת יחסים: 'אשה', טלפון: '0441239876' },
    { שם: 'בארי סמית'', מערכת יחסים: 'בֵּן', טלפון: '0442239876'}
    ]
    },
    {
    שם פרטי: 'מרי',
    שם משפחה: 'ג'ונסון',
    אנשי קשר חירום: [
    { שם: 'מארק ג'ונסון', מערכת יחסים: 'בַּעַל', טלפון: '0443239876' }
    ]
    },
    ];

2. ב-HTML, צור לולאה מקוננת בתוך הלולאה המקורית שלך כדי לעבור דרך כל איש קשר חירום, ולהציג את הפרטים שלו:

   <div *ngFor='תן אדם של אנשים; תן i = אינדקס'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='אפשר ליצור קשר עם אדם.חירוםאנשי קשר; תן j = אינדקס'>
   <h5> אנשי קשר לשעת חירום: </h5>
   <ע> {{שם איש קשר}} </p>
   <ע> {{person.relationship}} </p>
   <ע> {{person.phone}} </p>
   </div>
   <br>
   </div>

לולאה באמצעות ngFor ב-Angular

אתה יכול להשתמש בהנחיה המבנית של ngFor כדי לבצע לולאה דינמית דרך רכיבי HTML באתר שלך. זה יאפשר לך לחזור על אותו בלוק עבור מספר אובייקטים, או עבור מספר מוגדר של פעמים.

אתה יכול גם להשתמש בו כדי לעשות טריקים אחרים כמו דילוג על כל מספר זוגי או אי-זוגי או עיצוב האלמנט הראשון והאחרון. אתה יכול גם להשתמש בו לעיבוד דינמי של אובייקטים רבים בתוך אובייקטים אחרים.

ישנן הנחיות אחרות של Angular שבהן אתה יכול להשתמש כדי להפוך את האתר שלך לדינמי יותר. אלה כוללים ngIf, ngSwitch, ngStyle, ngClass ו-ngModel.