كيفية استخدام ngFor Angular Directive

يستخدم Angular التوجيهات لعرض عناصر HTML معينة ديناميكيًا على موقع الويب الخاص بك. أحد التوجيهات الهيكلية التي يمكنك استخدامها هو ngFor.

يسمح لك التوجيه ngFor بتكرار نفس الكتلة لعدد محدد من المرات ، أو التكرار خلال مصفوفة من الكائنات لعرض تفاصيلها. إنها أداة قوية يمكنك حتى استخدامها لعرض الكائنات داخل كائنات أخرى.

كما أن لديها العديد من الوظائف التي يمكن أن تكون مفيدة في سيناريوهات محددة. يتضمن ذلك العثور على العنصر الأول والأخير أو تخطي بعض العناصر.

كيفية استخدام ngFor لإجراء التكرار عبر الأرقام الثابتة

يعتمد التوجيه ngFor على الحلقة for ، وهي واحدة من العديد من الحلقات المفيدة التي يدعمها JavaScript. اعتبارًا من الإصدار الحالي من Angular (14) ، ستحتاج إلى إنشاء مصفوفة تحتوي على عدد العناصر التي تريد تكرارها.

1. يمكنك إنشاء قائمة داخل جملة ngFor نفسها. سيكرر الكود التالي فقرة خمس مرات ، باستخدام الفهارس من 0 إلى 4:

   <div * ngFor =
   
   
   
   
   
   instagram viewer
   
   'دعونا البند [0 ، 1 ، 2 ، 3 ، 4] ؛ اسمحوا أنا = الفهرس'>
   <ص> هذه فقرة مكررة: {{item}} </ ص>
   </div>

2. نظرًا لأن الطريقة أعلاه قد لا تكون مناسبة للمصفوفات الكبيرة ، يمكنك أيضًا إنشاء مصفوفة ديناميكيًا في ملف TypeScript:

   يصدّر صف دراسيمثالالأدواتOnInit{
    الأرقام: صفيف<رقم> = [];
   البناء() {
   // سيؤدي هذا إلى إنشاء المصفوفة التالية ديناميكيًا:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   هذه. الأعداد = مجموعة مصفوفة(10).يملأ(1). الخريطة ((x، i) => i)؛
    }
   }

3. يمكنك بعد ذلك إجراء حلقة عبر مصفوفة الأرقام في HTML:

   <div * ngFor ='اسمحوا عنصر من الأرقام ؛ اسمحوا أنا = الفهرس'>
   <ص>هذه فقرة مكررة: {{item}}</ ص>
   </div>

كيفية تخطي أو تصميم أرقام معينة

يمكنك استخدام ال الفردية أو حتى ngFor المتغيرات لتحديد كل رقم ثاني. السيناريو الذي قد تجد فيه هذا مفيدًا هو إذا كنت تريد تصميم كل صف فردي أو زوجي في جدول باستخدام لون مختلف.

1. في ملف CSS للمكون ، أضف بعض فئات CSS الجديدة. هذه هي الأنماط التي ستستخدمها لعناصر معينة في الفهارس الزوجية أو الفردية:

   .أحمر {
    لون احمر؛
   }
   .أزرق { 
    لون أزرق؛ 
   }
   

2. قم بتعريف المتغيرات الفردية والزوجية ضمن جملة ngFor. هذه هي المتغيرات التي سيتعرف عليها Angular. عيّن فئة CSS الحمراء للأرقام الزوجية وفئة CSS الزرقاء للأرقام الفردية:

   <div * ngFor ='اسمحوا عنصر من الأرقام ؛ السماح الفردية = فردي ؛ اسمحوا حتى = زوجي' [ngClass] ="{أحمر: زوجي ، أزرق: فردي}">
   <ص> هذه فقرة مكررة: {{item}} </ ص>
   </div>

3. قم بتشغيل موقع Angular الخاص بك باستخدام يخدم ng وافتحه في متصفح الويب. تتناوب عناصر HTML الفردية والزوجية بين الأنماط المختلفة بناءً على فئة CSS الخاصة بهم:
4. إذا كنت تريد تخطي كل رقم زوجي تمامًا ، فيمكنك استخدام التوجيه ngIf. سيؤدي هذا إلى تخطي جميع الأرقام الفردية وعرض الأرقام الزوجية فقط:

   <div * ngFor ='اسمحوا عنصر من الأرقام ؛ اسمحوا حتى = زوجي'>
   <ع * ngIf ='حتى'> هذه فقرة مكررة: {{item}} </ ص>
   </div>

كيفية العد التنازلي

للعد إلى الوراء ، يمكنك استخدام الطرق التقليدية مثل عكس القائمة أو العد للخلف خلال الحلقة باستخدام فهرس.

1. قم بتعريف متغير فهرس في عبارة ngFor. داخل ngFor ، ابدأ من طول المصفوفة وقم بخصم عدد العناصر التي قمت بتكرارها بالفعل:

   <div * ngFor ="اسمحوا عنصر من الأرقام ؛ اسمحوا أنا = الفهرس ؛">
   <ص> هذه فقرة مكررة: {{number.length-i-1}} </ ص>
   </div>

2. يمكنك أيضًا إنشاء قائمة معكوسة في ملف TypeScript:

   يصدّر صف دراسيمثالالأدواتOnInit{
    الأرقام: صفيف<رقم> = [];
    عكس القائمة: صفيف<رقم> = [];
   البناء() {
   هذه. الأعداد = مجموعة مصفوفة(10).يملأ(1). الخريطة ((x، i) => i)؛
   هذه.reversedList = هذه.numbers.slice (). reverse () ؛
    }
   }

3. كرر القائمة المعكوسة باستخدام ngFor:

   <div * ngFor ='دع عنصر من القائمة العكسية ؛ اسمحوا أنا = الفهرس'>
   <ص> هذه فقرة مكررة: {{item}} </ ص>
   </div>

كيفية تصميم العنصر الأول والعنصر الأخير بشكل مختلف

يمكنك تصميم العناصر الأولى والأخيرة بشكل منفصل عن العناصر الأخرى باستخدام تنسيق أول و الاخير المتغيرات الزاوية. هذا بديل ل باستخدام فئات psuedo CSS مثل : أول طفل.

1. في العبارة ngFor ، أعلن عن المتغيرين الأول والأخير. استخدم التوجيه ngClass لتعيين فئتي CSS باللونين الأزرق والأحمر في الخطوات السابقة. قم بتعيين فئة CSS الزرقاء للعنصر الأول ، وفئة CSS الحمراء للعنصر الأخير:

   <div * ngFor ='اسمحوا عنصر من الأرقام ؛ دعنا أولا = أولا ؛ دعنا أخيرًا = أخيرًا' [ngClass] = "{الأزرق: الأول ، الأحمر: الأخير}">
   <ص> هذه فقرة مكررة: {{item}} </ ص>
   </div>

كيفية استخدام ngFor للتكرار عبر الكائنات

يمكنك استخدام التوجيه ngFor للتنقل بين الكائنات والوصول إلى المتغيرات الفردية الخاصة بها.

1. قم بإنشاء قائمة كائنات في ملف TypeScript. في هذه الحالة ، ستكون هناك قائمة بالأشخاص بتفاصيلهم:

   يصدّر صف دراسيمثالالأدواتOnInit{
    الناس = [] ؛ 
   البناء() {
   هذه.people = [
    { الاسم الاول: 'جون'، اللقب: 'حداد'، إشغال: 'مدير الموارد البشرية'، startDate: تاريخ جديد ("2019-02-05") },
    { الاسم الاول: 'ماري'، اللقب: 'جونسون'، إشغال: 'موظف تقني'، startDate: تاريخ جديد ("2016-01-07") },
    { الاسم الاول: 'وليام'، اللقب: 'بني'، إشغال: 'موظف HR'، startDate: تاريخ جديد ("2018-03-03") },
    ];
    }
   }

2. في HTML ، استخدم حلقة ngFor للتكرار خلال قائمة الأشخاص. يمكن الوصول إلى كل شخص باستخدام شخص عامل. يمكنك استخدام متغير person للوصول إلى سمات كل شخص:

   <div * ngFor ='دع الناس اسمحوا أنا = الفهرس'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <ص> {{person.occupation}} </ ص>
   <ص> {{person.startDate}} </ ص>
   </div>

كيفية استخدام ngFor المتداخلة لعرض الكائنات داخل كائنات أخرى

يمكنك استخدام حلقة for المتداخلة لعرض الكائنات داخل كائنات أخرى.

1. تعديل قائمة الأشخاص. سيكون لكل شخص قائمة طارئة من جهات الاتصال. قم بتخزين كل جهة اتصال في حالات الطوارئ ككائن منفصل:

   هذه.people = [
    {
    الاسم الاول: 'جون',
    اللقب: 'حداد',
    جهة اتصال للطوارئ: [
    { اسم: 'أماندا سميث'، صلة: 'زوجة'، هاتف: '0441239876' },
    { اسم: 'باري سميث'، صلة: 'ابن'، هاتف: '0442239876'}
    ]
    },
    {
    الاسم الاول: 'ماري',
    اللقب: 'جونسون',
    جهة اتصال للطوارئ: [
    { اسم: 'مارك جونسون'، صلة: 'الزوج'، هاتف: '0443239876' }
    ]
    },
    ];

2. في HTML ، أنشئ حلقة متداخلة داخل الحلقة الأصلية لتكرار كل جهة اتصال للطوارئ ، وعرض تفاصيلها:

   <div * ngFor ='دع الناس اسمحوا أنا = الفهرس'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div * ngFor ='السماح بالاتصال بالشخص. اسمحوا j = الفهرس'>
   <h5> جهة اتصال للطوارئ: </h5>
   <ص> {{contact.name}} </ ص>
   <ص> {{person.relationship}} </ ص>
   <ص> {{person.phone}} </ ص>
   </div>
   <ر>
   </div>

التكرار باستخدام ngFor في Angular

يمكنك استخدام التوجيه البنيوي ngFor لإجراء تكرار ديناميكي عبر عناصر HTML على موقع الويب الخاص بك. سيسمح لك هذا بتكرار نفس الكتلة لعدد من الكائنات ، أو لعدد محدد من المرات.

يمكنك أيضًا استخدامه للقيام بحيل أخرى مثل تخطي كل رقم زوجي أو فردي أو تصميم العنصر الأول والأخير. يمكنك أيضًا استخدامه لعرض العديد من الكائنات ديناميكيًا داخل كائنات أخرى.

هناك توجيهات Angular أخرى يمكنك استخدامها للمساعدة في جعل موقع الويب الخاص بك أكثر ديناميكية. وتشمل هذه ngIf و ngSwitch و ngStyle و ngClass و ngModel.