בפוסט הזה נראה כיצד לרוץ בלולאה באנגולר.
דוגמא 1 – לולאה פשוטה על מערך באנגולר , באמצעות ngFor*
לצורך בסיס לדוגמא הראשונה, נראה קודם כל איך אנגולר מציג לנו מערך רגיל, ללא לולאה.
אם נפעיל את הקוד הבא, אנגולר יציג לנו את תוכן המערך, מופרד בפסיקים.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ngfor3',
template: `
The products are : {{ products }}
`
})
export class Ngfor3Component implements OnInit {
products:string[] = ['bread','milk','rice','water'];
constructor() { }
ngOnInit() {
}
}
עכשיו, נניח ונרצה לרוץ בלולאה על המערך ולהציג אותו בנקודות.
לצורך כך נשתמש ב-ngFor.
הוא מתחיל בסימן כוכבית *, ולאחריו בתוך מרכאות, אנחנו כותבים בדומה לשפות אחרות, מהו המשתנה שמקבל את הסמן בלולאה, ומהו המערך שעליו רצים.
התוצאה של זה תהיה תצוגה בנקודות של הרשימה .
להלן רק קטע הקוד שהשתנה :
template: `
<ul>
<li *ngFor="let product of products">
{{product}}
</li>
</ul>
`
דוגמא 2 – לולאה עם 2 סמנים בו זמנית באנגולר, באמצעות ngFor*
אם נוסיף עוד סמן ללולאה, אפשר יהיה להוסיף את המספרים שלהם על יד כל נקודה. (הוספתי 1 כדי להתחיל מ-1 ולא מאפס).
template: `
<ul>
<li *ngFor="let product of products;let i = index">
{{ i+1 }} -> {{product}}
</li>
</ul>
`
דוגמא 3 – לולאה על מערך של אובייקטים באנגולר, באמצעות ngFor*
בדוגמא הבאה, יש לנו מערך של אובייקטים, ואנחנו מציגים מאפיינים של האובייקט.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ngfor3',
template: `
<ul>
<li *ngFor="let product of products;let i = index">
{{ i+1 }} -> {{product}}
</li>
</ul>
<ul>
<li *ngFor="let habbit of habbits">
Habbit Name: {{habbit.Title}} | is it risky: {{ habbit.isRisky }}
</li>
</ul>
`
})
export class Ngfor3Component implements OnInit {
products:string[] = ['bread','milk','rice','water'];
habbits = [
{
'Title': 'surf',
'isRisky': 'Yes'
},
{
'Title': 'smoke',
'isRisky': 'Yes'
}
];
constructor() { }
ngOnInit() {
}
}
הערה לסיום – שינוי תוכן המערך לפני התצוגה על המסך
כיוון שהמערכים נוצרים כשנוצר המופע של המחלקה, אז אפשר לשנות אותם בתוך הקונסטרטור, והשינוי כמובן ישתקף במה שמוצג על המסך.
אם לדוגמא נשנה את רמת הסיכון של אחד התחביבים ברשימה, כמובן שזה ישתקף ברשימה על המסך.
constructor() {
this.habbits[1].isRisky = "No";
}