التكرار باستخدام @for
اعرضوا القوائم باستخدام @for وتعبيرات التتبع
التكرار باستخدام @for درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
التكرار باستخدام for
تكرر كتلة at-for المحتوى لكل عنصر في مجموعة. وهي تستبدل التوجيه القديم star-ngFor وتتطلب تعبير track.
الصياغة الأساسية لـ for
اكتبوا الرمز at، ثم الكلمة for، ثم item of items، وأضيفوا عبارة track المطلوبة التي تحدد مفتاحًا فريدًا.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }سبب ضرورة track
يخبر تعبير track Angular بكيفية تحديد هوية كل عنصر عند حدوث تغييرات، كي يعيد استخدام عقد DOM بدلًا من إعادة إنشائها. ويحسّن ذلك الأداء بدرجة كبيرة.
التتبع حسب الهوية
إذا لم تكن للعناصر معرّفات ثابتة، مثل قائمة من السلاسل النصية الأولية، فيمكنكم التتبع باستخدام العنصر نفسه.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }كتلة empty
تُعرض كتلة at-empty عندما لا تحتوي المجموعة على أي عناصر. وتأتي بعد القوس المعقوف الختامي لكتلة at-for.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }المتغيرات السياقية
تتوفر داخل كتلة at-for متغيرات مفيدة، منها index وcount وfirst وlast وeven وodd. التقطوها باستخدام let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }متغير index
تعطي قيمة dollar-index موضع العنصر الحالي بدءًا من الصفر، وغالبًا ما تُسند إلى متغير محلي باسم بديل كما هو موضح أعلاه.
first وlast
تكون قيمتا boolean dollar-first وdollar-last صحيحتين للعنصرين الأول والأخير، وهذا مفيد للتنسيق أو الفواصل.
even وodd
تساعد قيمتا boolean dollar-even وdollar-odd على تطبيق أنماط متناوبة على الصفوف.
التكرار على Signal
يمكن أن تأتي المجموعة من signal؛ ما عليكم سوى استدعائها في تعبير for.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }فائدة الأداء
بما أن track إلزامي، فإن at-for الجديدة أسرع من star-ngFor من دون trackBy، لأن Angular يعرف دائمًا كيفية مطابقة العناصر بعقد DOM.
تحقق سريع: التكرار
متطلب كتلة for.
مراجعة: التكرار
تعلّمتم استخدام كتلة at-for مع تعبير track الإلزامي، وكتلة at-empty للمجموعات الفارغة، والمتغيرات السياقية مثل index وfirst وlast وeven وodd. وهي تستبدل star-ngFor. التالي: التبديل باستخدام at-switch.
الأسئلة الشائعة
هل درس «التكرار باستخدام @for» مجاني؟
نعم — نص درس «التكرار باستخدام @for» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «التكرار باستخدام @for»؟
اعرضوا القوائم باستخدام @for وتعبيرات التتبع تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «التكرار باستخدام @for»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- العرض الشرطي باستخدام @if
- التكرار باستخدام @for
- التبديل باستخدام @switch
- التحميل المؤجّل باستخدام @defer