🚀 برای حرکت با حلقه های زاویه ای!

یاد بگیرید که عناصر را مانند کل کاپیتان تکرار کنید 🧑‍✈

سلام devs 👩‍💻👨‍💻 ، امروز ما قصد داریم به یک موضوع فوق العاده مفید در زاویه ای بپردازیم: حلقه هابشر

درست همانطور که یک کشتی از طریق دریا در چندین جزیره سفر می کند – جمع آوری داده های سفر حلقه ها، نشان دادن پردازش هر عنصر.

بیایید ببینیم که چگونه این کار در زاویه ای گام به گام انجام می شود ، با نمونه ها و ایموجی ها تا خواب نباشد.

1⃣ *ngFor در HTML – رودر کشتی

تصور کنید که شما یک لیست میوه های گرمسیری دارید 🍍🍌🥭 می خواهید روی صفحه نمایش نشان دهید. اینجا وارد می شود *ngFor به نجات!

// archivo: frutas.component.ts
export class FrutasComponent {
  frutas: string[] = ['Piña 🍍', 'Banano 🍌', 'Mango 🥭'];
}

و در HTML:

  
 *ngFor="let fruta of frutas">{{ fruta }}

📌 توضیح:

• *ngFor هر عنصر از frutasبشر
• let fruta of frutas یک متغیر ایجاد کنید fruta برای هر عنصر
• {{ fruta }} آن را روی صفحه نمایش دهید.

🧠 آسان و تمیز! و به نظر می رسد مانند این:

- Piña 🍍
- Banano 🍌
- Mango 🥭

2⃣ حلقه ها در TypeScript – موتورهای کشتی 🛠

حالا فرض کنید می خواهید کاری انجام دهید با منطق، نحوه فیلتر کردن میوه یا تبدیل آنها به حروف بزرگ.

🧪 مثال با for سنتی:

for (let i = 0; i < this.frutas.length; i++) {
  console.log(`Fruta #${i + 1}: ${this.frutas[i]}`);
}

🧪 مثال با forEach:

this.frutas.forEach((fruta, index) => {
  console.log(`Fruta ${index + 1}: ${fruta.toUpperCase()}`);
});

🧪 مثال با map برای تبدیل:

const frutasEnMayuscula = this.frutas.map(fruta => fruta.toUpperCase());
console.log(frutasEnMayuscula); // ['PIÑA 🍍', 'BANANO 🍌', 'MANGO 🥭']

3⃣ جایزه: ng-template برای کنترل بیشتر

می توانید استفاده کنید ng-template اگر می خواهید در صورت عدم وجود اطلاعاتی ، پیامی را نشان دهید. مثال:

 *ngIf="frutas.length > 0; else noHayFrutas">
  
 *ngFor="let fruta of frutas">{{ fruta }}


 #noHayFrutas>
  No hay frutas para mostrar 🍽️

🧭 خلاصه کاپیتان

🚀 کافی و تمرین!

حلقه ها بخشی از روح یک برنامه پویا هستند. چه نمایشگر 🛍 یا پست ها ، کاربران را نشان می دهید ، می دانید که چگونه آنها را با سبک حرکت دهید.