فوريتش
في LWC، for:each هو توجيه يُستخدم مع علامة القالب. تقوم بإرجاع العناصر من البيانات المعطاة. يستغرق معلمتين. يجب علينا تحديد البيانات في لـ: كل = {بيانات} و لـ: العنصر = 'متغير' يأخذ العنصر الحالي (من المكرر) المحدد بمتغير. ال لـ: الفهرس = 'index_var' يخزن فهرس العنصر الذي يحدد فهرس العنصر الحالي.
بناء الجملة:
دعونا نرى كيفية تحديد توجيه for:each في LWC (مكون HTML). إن for:index اختياري.
<قالب لـ:each={data} لـ:item= 'item_var' ل:الفهرس= 'index_var' >
'1.0' ?>
<الأهداف>
2. في جميع الأمثلة التي سنناقشها في هذا الدليل، سيتم توفير المنطق كرمز 'js'. بعد ذلك، نحدد لقطة الشاشة التي تتضمن كود “js” بالكامل.
مثال 1:
لنقم بإنشاء قائمة تحتوي على 10 مواضيع في ملف 'firstComponent.js'. استخدم توجيه القالب for:each وكرر هذه القائمة باستخدام المكرر 'sub'. حدد المفتاح كهذا المكرر داخل علامة الفقرة واعرض الموضوعات.
firstExample.html<قالب>
< عنوان بطاقة البرق = 'مصفوفة المواضيع' >
<المركز>
<قالب لـ:each={subjects_array} لـ:item= 'الفرعية' ل:الفهرس= 'فِهرِس' >
{sub
firstExample.js
// قم بإنشاء مصفوفة المواضيع التي تحمل 10 المواضيع
المواضيع_صفيف = [ 'أوس' , 'قوة المبيعات' , 'بي أتش بي' , 'جافا' , 'بايثون' , 'لغة البرمجة' , 'شبيبة' , 'جافا' , 'وحي' , 'ج#' ];
الكود بالكامل:
انتاج:
أضف هذا المكون إلى صفحة 'السجل' لأي كائن (نقوم بإضافته إلى صفحة 'السجل' الخاصة بالحساب). يتم عرض جميع العناصر العشرة على واجهة المستخدم.
مثال 2:
الآن، نقوم بإنشاء مصفوفة من الكائنات وهي 'id'، البرنامج، ونكتب بها 10 سجلات مرتبطة بالموضوعات. يتم تكرارها للحصول على البرنامج والنوع. المفتاح هو 'المعرف' ويتم عرض قيم النوع بالخط العريض.
SecondExample.html<قالب>
< عنوان بطاقة البرق = 'مجموعة من المواضيع' >
<المركز>
<قالب لـ:each={array_of_objects} لـ:item= 'الكائن' ل:الفهرس= 'فِهرِس' >
{obj.program} - {obj.type}
SecondExample.js
// قم بإنشاء array_of_objects الذي يحتوي على تفاصيل 10 المواضيع
array_of_objects = [{المعرف: 1 ،برنامج: 'أوس' ، يكتب: 'سحاب' }،{بطاقة تعريف: 2 ،برنامج: 'قوة المبيعات' ، يكتب: 'سحاب' },
{بطاقة تعريف: 3 ،برنامج: 'بي أتش بي' ، يكتب: 'الويب' }،{بطاقة تعريف: 4 ،برنامج: 'جافا' ، يكتب: 'الويب/البيانات' },
{بطاقة تعريف: 5 ،برنامج: 'بايثون' ، يكتب: 'الجميع' }،{بطاقة تعريف: 6 ،برنامج: 'لغة البرمجة' ، يكتب: 'الويب' },
{بطاقة تعريف: 7 ،برنامج: 'شبيبة' ، يكتب: 'الويب' }،{بطاقة تعريف: 8 ،برنامج: '.شبكة' ، يكتب: 'الويب/البيانات' },
{بطاقة تعريف: 9 ،برنامج: 'وحي' ، يكتب: 'بيانات' }،{بطاقة تعريف: 10 ،برنامج: 'ج#' ، يكتب: 'بيانات' }];
الكود بالكامل:
انتاج:
يمكنك أن ترى أن جميع البرامج معروضة على واجهة المستخدم مع أنواعها.
مثال 3:
قم بإنشاء مصفوفة متداخلة من الكائنات (المعرف والبرنامج والنوع والموضوعات). هنا، ستحتوي المواضيع مرة أخرى على قائمة العناصر. في التوجيه الأول for:each قالب، قمنا بتكرار المصفوفة المتداخلة بأكملها. داخل هذا القالب، نقوم بتكرار المواضيع مرة أخرى باستخدام المكرر السابق. بعد ذلك، نعرض البرنامج والنوع والمواضيع الرئيسية لكل قالب.
ThirdComponent.html<قالب>
< عنوان بطاقة البرق = 'مجموعة من المواضيع' >
<المركز>
<قالب لـ:each={data} لـ:item= 'فال' ل:الفهرس= 'فِهرِس' >
<قالب لـ:each={val.Topics} لـ:item= 'فال1' >
البرنامج: {val.program} - {val.type} الموضوعات: {val.Topics
ThirdComponent.js
البيانات = [{المعرف: 1 ،برنامج: 'أوس' ، يكتب: 'سحاب' ، المواضيع:[ 'مقدمة' , 'أساسيات AWC' ]},
{بطاقة تعريف: 2 ،برنامج: 'قوة المبيعات' ، يكتب: 'سحاب' ، المواضيع:[ 'مسؤل' , 'تطوير' ]},
{بطاقة تعريف: 3 ،برنامج: 'بي أتش بي' ، يكتب: 'الويب' ، المواضيع:[ 'مقدمة' , 'بي إتش بي-ماي إس كيو إل' ]}];
الكود بالكامل:
انتاج:
يتم عرض جميع المواضيع مع نوعها وموضوعاتها. كل موضوع يحمل موضوعين.
مثال 4:
دعونا نكرر السجلات الموجودة في كائن 'الحساب'. أولاً، اكتب فئة Apex التي تُرجع قائمة السجلات (returnAcc() - الطريقة) التي تتضمن حقول معرف الحساب والاسم والصناعة والتصنيف من كائن الحساب القياسي. في الملف 'js'، نقوم باستدعاء طريقة returnAcc() من Apex (من خلال بيان الاستيراد) داخل Connectcallback(). هذا يعيد الحسابات. أخيرًا، تم تحديد هذه الحسابات في توجيه قالب for:each للحصول على اسم الحساب والصناعة.
AccountData.apxcعام مع مشاركة فئة AccountData {
@AuraEnabled(قابل للتخزين المؤقت=صحيح)
القائمة الثابتة العامة
List
قائمة حسابات الإرجاع؛
}
}
FinalComponent.html
<قالب>
< عنوان بطاقة البرق = 'عرض قائمة الحسابات' >
<فئة القسم= 'slds-var-m-around_medium' >
<قالب إذا:صحيح={حسابات}>
<قالب لـ:each={حسابات} لـ:item= 'account_rec' >
الحساب: {account_rec.Name} الصناعة: {account_rec.Industry
