نحوه استفاده از دستورالعمل ngFor Angular

تمام آنچه را که باید در مورد این دستورالعمل قدرتمند بدانید و اینکه چگونه کار با دنباله ها را بسیار آسان می کند، کشف کنید.

Angular از دستورالعمل‌ها برای نمایش پویا برخی از عناصر HTML در وب‌سایت شما استفاده می‌کند. یکی از دستورالعمل های ساختاری که می توانید استفاده کنید ngFor است.

دستورالعمل ngFor به شما امکان می دهد همان بلوک را چند بار تکرار کنید یا از میان آرایه ای از اشیا حلقه بزنید تا جزئیات آنها را نمایش دهید. این یک ابزار قدرتمند است که حتی می توانید از آن برای رندر کردن اشیاء در اشیاء دیگر استفاده کنید.

همچنین دارای عملکردهای زیادی است که می تواند در سناریوهای خاص مفید باشد. این شامل یافتن اولین و آخرین عناصر یا نادیده گرفتن موارد خاص است.

نحوه استفاده از ngFor برای حلقه زدن از طریق اعداد استاتیک

دستورالعمل ngFor بر اساس حلقه for است، یکی از حلقه های مفیدی که جاوا اسکریپت پشتیبانی می کند. از نسخه فعلی Angular (14)، باید آرایه‌ای ایجاد کنید که تعداد آیتم‌هایی را که می‌خواهید در آن حلقه بزنید، ایجاد کنید.

1. شما می توانید یک لیست در خود عبارت ngFor ایجاد کنید. کد زیر یک پاراگراف را پنج بار با استفاده از شاخص های 0 تا 4 تکرار می کند:
       

   این یک پاراگراف تکراری است: {{item}}

2. از آنجایی که روش بالا ممکن است برای آرایه های بزرگ مناسب نباشد، می توانید به صورت پویا یک آرایه در فایل TypeScript ایجاد کنید:export class ExampleClass implements OnInit {  numbers: Array = []; constructor() {    // این به صورت پویا آرایه زیر را ایجاد می‌کند:    // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]    this.numbers = Array(10).fill(1) .map((x,i)=>i); }}
3. سپس می توانید از طریق آرایه اعداد در HTML حلقه بزنید:
       

   این یک پاراگراف تکراری است: {{item}}

<div *ngFor='let item of [0, 1, 2, 3, 4]; let i = index'>
    <p> This is a repeated paragraph: {{item}} </p>
</div> 

export class ExampleClass implements OnInit {
  numbers: Array<number> = [];
  constructor() {
    // This will dynamically create the following array:
    // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    this.numbers = Array(10).fill(1).map((x,i)=>i);
  }
}

<div *ngFor='let item of numbers; let i = index'>
    <p>This is a repeated paragraph: {{item}}</p>
</div>

چگونه اعداد خاصی را نادیده بگیریم یا به آن ها مدل دهیم

برای تعیین هر عدد دوم می توانید از متغیرهای فرد یا زوج ngFor استفاده کنید. سناریویی که ممکن است برای شما مفید باشد این است که بخواهید هر سطر فرد یا زوج در جدول را با استفاده از رنگی متفاوت استایل دهید.

1. در فایل CSS برای یک جزء، چند کلاس CSS جدید اضافه کنید. اینها سبک‌هایی هستند که برای عناصر خاص در نمایه‌های زوج یا فرد استفاده می‌کنید:.red {  color: red;}.blue {  color: blue; }
2. متغیرهای زوج و فرد را در دستور ngFor اعلام کنید. اینها متغیرهایی هستند که Angular آنها را تشخیص می دهد. کلاس CSS قرمز را به اعداد زوج و کلاس آبی CSS را به اعداد فرد اختصاص دهید:
       

   این یک پاراگراف تکراری است: {{item}}

3. وب سایت Angular خود را با استفاده از ng serve اجرا کنید و آن را در مرورگر وب باز کنید. عناصر HTML زوج و فرد بین سبک های مختلف بر اساس کلاس CSS خود متناوب می شوند:
4. اگر می خواهید از هر عدد زوج به طور کامل رد شوید، می توانید از دستورالعمل ngIf استفاده کنید. با این کار تمام اعداد فرد رد می شود و فقط اعداد زوج نمایش داده می شود:
       

   این یک پاراگراف تکراری است: {{item}}

.red {
  color: red;
}
.blue { 
 color: blue; 
}

<div *ngFor='let item of numbers; let odd = odd; let even = even' [ngClass]="{red: even, blue: odd}">
    <p> This is a repeated paragraph: {{item}} </p>
</div>

<div *ngFor='let item of numbers; let even = even'>
    <p *ngIf='even'> This is a repeated paragraph: {{item}} </p>
</div>

نحوه شمارش معکوس

برای شمارش معکوس، می‌توانید از روش‌های سنتی مانند معکوس کردن فهرست یا شمارش معکوس از طریق حلقه با استفاده از یک شاخص استفاده کنید.

1. یک متغیر شاخص در عبارت ngFor اعلام کنید. در داخل ngFor، از طول آرایه شروع کنید و تعداد مواردی را که قبلاً حلقه زده اید کم کنید:
       

   این یک پاراگراف تکراری است: {{numbers.length-i-1}}

     

2. همچنین می توانید یک لیست معکوس در فایل TypeScript ایجاد کنید:export class ExampleClass Implements OnInit {  numbers: Array = []; reversedList: آرایه = []; constructor() {    this.numbers = Array(10).fill(1).map((x,i)=>i); this.reversedList = this.numbers.slice().reverse(); }}
3. با استفاده از ngFor:
       

   این یک پاراگراف تکراری است: {{item}}

<div *ngFor="let item of numbers; let i = index;">
    <p> This is a repeated paragraph: {{numbers.length-i-1}} </p>
  </div>

export class ExampleClass implements OnInit {
  numbers: Array<number> = [];
  reversedList: Array<number> = [];
  constructor() {
    this.numbers = Array(10).fill(1).map((x,i)=>i);
    this.reversedList = this.numbers.slice().reverse();
  }
}

<div *ngFor='let item of reversedList; let i = index'>
    <p> This is a repeated paragraph: {{item}} </p>
</div>

چگونه اولین و آخرین عنصر را متفاوت طراحی کنیم

با استفاده از متغیرهای اول و آخر Angular می توانید اولین و آخرین عناصر را جدا از سایر عناصر استایل دهید. این یک جایگزین برای استفاده از کلاس‌های psuedo-CSS مانند:first-child است.

1. در دستور ngFor، اولین و آخرین متغیر را اعلام کنید. از دستورالعمل ngClass برای اختصاص کلاس های CSS آبی و قرمز در مراحل قبل استفاده کنید. کلاس CSS آبی را به اولین عنصر و کلاس CSS قرمز را به آخرین عنصر اختصاص دهید:
       

   این یک پاراگراف تکراری است: {{item}}

<div *ngFor='let item of numbers; let first = first; let last = last' [ngClass]= "{blue: first, red: last}">
    <p> This is a repeated paragraph: {{item}} </p>
</div>

نحوه استفاده از ngFor برای تکرار روی اشیا

می توانید از دستور ngFor برای حلقه زدن اشیا و دسترسی به متغیرهای جداگانه آنها استفاده کنید.

1. لیستی از اشیا را در فایل TypeScript ایجاد کنید. در این مورد، لیستی از افراد با جزئیات آنها وجود خواهد داشت: Export class ExampleClass implements OnInit {  people = []; constructor() {    this.people = [      { firstName: ‘John’, lastName: ‘Smith’, occupation: ‘HR Manager’, startDate: new Date(“2019-02-05”) },      { firstName: ‘Mary’ ، نام خانوادگی: “جانسون”، شغل: “مسئول فنی”، تاریخ شروع: تاریخ جدید (“07-01-2016”) }،      { نام: «ویلیام»، نام خانوادگی: «براون»، شغل: «افسر منابع انسانی»، تاریخ شروع : new Date(“2018-03-03”) }،    ]; }}
2. در HTML، از حلقه ngFor برای حلقه زدن لیست افراد استفاده کنید. هر فرد با استفاده از متغیر شخص قابل دسترسی خواهد بود. می توانید از متغیر شخص برای دسترسی به ویژگی های هر فرد استفاده کنید:
       

   {{person.firstName}} {{person.lastName}}

       

   {{person.occupation}}

       

   {{person.startDate} }

export class ExampleClass implements OnInit {
  people = []; 
  constructor() {
    this.people = [
      { firstName: 'John', lastName: 'Smith', occupation: 'HR Manager', startDate: new Date("2019-02-05") },
      { firstName: 'Mary', lastName: 'Johnson', occupation: 'Technical Officer', startDate: new Date("2016-01-07") },
      { firstName: 'William', lastName: 'Brown', occupation: 'HR Officer', startDate: new Date("2018-03-03") },
    ];
  }
}

<div *ngFor='let person of people; let i = index'>
    <h2> {{person.firstName}} {{person.lastName}} </h2>
    <p> {{person.occupation}} </p>
    <p> {{person.startDate}} </p>
</div>

نحوه استفاده از Nested ngFor برای نمایش اشیا در داخل اشیاء دیگر

شما می توانید از یک حلقه تو در تو برای نمایش اشیاء در داخل اشیاء دیگر استفاده کنید.

1. لیست افراد را اصلاح کنید. هر فرد یک لیست اضطراری از مخاطبین خواهد داشت. هر مخاطب اضطراری را به‌عنوان یک شی جداگانه ذخیره کنید:this.people = [      {        Name: ‘John’,        Name: ‘Smith’,        EmergencyContacts: [                                                                                                                                                                                       ‘ } ,          { نام: «باری اسمیت»، رابطه: «پسر»، تلفن: «0442239876»}        ]      }،      {        Name: ‘Mary’،      a son: «Name : [          { نام: «مارک جانسون»، رابطه: «شوهر»، تلفن: «0443239876» }        ]      }، ]؛
2. در HTML، یک حلقه تودرتو در داخل حلقه اصلی خود ایجاد کنید تا از طریق هر مخاطب اضطراری حلقه شود، و جزئیات آنها را نمایش دهید:
       

   {{person.firstName}} {{person.lastName}}

       

         

   مخاطبین اضطراری:

         

   {{contact.name}}

         

   {{person.relationship}}

         

   {{person .phone}}

       

         

this.people = [
      {
        firstName: 'John',
        lastName: 'Smith',
        emergencyContacts: [
          { name: 'Amanda Smith', relationship: 'Wife', phone: '0441239876' },
          { name: 'Barry Smith', relationship: 'Son', phone: '0442239876'}
        ]
      },
      {
        firstName: 'Mary',
        lastName: 'Johnson',
        emergencyContacts: [
          { name: 'Mark Johnson', relationship: 'Husband', phone: '0443239876' }
        ]
      },
 ];

<div *ngFor='let person of people; let i = index'>
    <h2> {{person.firstName}} {{person.lastName}} </h2>
    <div *ngFor='let contact of person.emergencyContacts; let j = index'>
      <h5> Emergency Contacts: </h5>
      <p> {{contact.name}} </p>
      <p> {{person.relationship}} </p>
      <p> {{person.phone}} </p>
    </div>
    

  </div>

حلقه زدن با استفاده از ngFor در Angular

شما می توانید از دستورالعمل ساختاری ngFor برای حلقه پویایی عناصر HTML در وب سایت خود استفاده کنید. این به شما امکان می دهد همان بلوک را برای تعدادی از اشیاء یا برای تعداد مشخصی بار تکرار کنید.

همچنین می توانید از آن برای انجام ترفندهای دیگری مانند پرش از هر عدد زوج یا فرد یا استایل دادن به عنصر اول و آخر استفاده کنید. شما همچنین می توانید از آن برای رندر دینامیکی بسیاری از اشیاء درون اشیاء دیگر استفاده کنید.

دستورالعمل های Angular دیگری وجود دارد که می توانید از آنها برای پویایی بیشتر وب سایت خود استفاده کنید. اینها عبارتند از ngIf، ngSwitch، ngStyle، ngClass و ngModel.

منبع مقاله