ہر ایک کے لئے
LWC میں، for:each ایک ہدایت ہے جو ٹیمپلیٹ ٹیگ کے ساتھ استعمال ہوتی ہے۔ یہ دیئے گئے ڈیٹا سے آئٹمز واپس کرتا ہے۔ یہ دو پیرامیٹرز لیتا ہے. ہمیں میں ڈیٹا کی وضاحت کرنی ہوگی۔ for:each={data} اور برائے: آئٹم = 'متغیر' موجودہ آئٹم لیتا ہے (دوہرانے والے سے) جو متغیر کے ساتھ مخصوص کیا گیا ہے۔ دی برائے: index='index_var' عنصر انڈیکس کو ذخیرہ کرتا ہے جو موجودہ عنصر انڈیکس کی وضاحت کرتا ہے۔
نحو:
آئیے دیکھتے ہیں کہ ایل ڈبلیو سی (ایچ ٹی ایم ایل اجزاء) میں کے لیے:ہر ہدایت کی وضاحت کیسے کی جائے۔ برائے:انڈیکس اختیاری ہے۔
<ٹیمپلیٹ برائے:each={data} for:item= 'آئٹم_وار' for:index= 'index_var' >
جب آپ for:each loop کے اندر اقدار کو ظاہر کر رہے ہیں، تو آپ کو ایک کلید بتانے کی ضرورت ہے (یہ ایک سٹرنگ/نمبر ہونا چاہیے؛ کوئی چیز نہیں) جو موجودہ آئٹم_وار کو کلید کے طور پر لیتی ہے۔ اس کلید کو استعمال کرنے کا فائدہ یہ ہے کہ اس بات کی نشاندہی کی جائے کہ کون سے آئٹمز کو ڈیٹا میں شامل، اپ ڈیٹ اور ہٹایا گیا ہے۔
1. تمام مثالیں اس 'meta.xml' فائل کو استعمال کرتی ہیں۔ ہم ہر ایک مثال میں اس کی وضاحت نہیں کریں گے۔ LWC اجزاء کو آپ کے ریکارڈ پیج، ایپ پیج، یا ہوم پیج میں شامل کیا جا سکتا ہے۔
'1.0' ؟>
<اہداف>
2. ان تمام مثالوں میں جن پر ہم اس گائیڈ میں بحث کرنے جا رہے ہیں، منطق کو 'js' کوڈ کے طور پر فراہم کیا جائے گا۔ اس کے بعد، ہم اسکرین شاٹ کی وضاحت کرتے ہیں جس میں پورا 'js' کوڈ شامل ہوتا ہے۔
مثال 1:
آئیے ایک فہرست بنائیں جس میں 'firstComponent.js' فائل میں 10 مضامین ہوں۔ for:each template directive کا استعمال کریں اور 'sub' iterator کے ساتھ اس فہرست کو دہرائیں۔ پیراگراف ٹیگ کے اندر اس تکرار کنندہ کے طور پر کلید کی وضاحت کریں اور مضامین کو ظاہر کریں۔
firstExample.html<ٹیمپلیٹ>
<مرکز>
<ٹیمپلیٹ برائے:each={subjects_array} for:item= 'ذیلی' for:index= 'انڈیکس' >
{sub}
firstExample.js
// مضامین_ارے بنائیں جو رکھتا ہے۔ 10 مضامین
مضامین_سری = [ 'AWS' , 'سیلز فورس' , 'PHP' , 'جاوا' , 'ازگر' , 'HTML' , 'جے ایس' , 'جاوا' , 'اوریکل' , 'C#' ];
پورا کوڈ:
آؤٹ پٹ:
اس جزو کو کسی بھی چیز کے 'ریکارڈ' صفحہ میں شامل کریں (ہم اسے اکاؤنٹ 'ریکارڈ' صفحہ میں شامل کرتے ہیں)۔ تمام 10 عناصر UI پر دکھائے جاتے ہیں۔
مثال 2:
اب، ہم آبجیکٹس کی ایک صف بناتے ہیں جو کہ 'id' پروگرام ہے، اور سبجیکٹس سے متعلق 10 ریکارڈ کے ساتھ ٹائپ کرتے ہیں۔ یہ پروگرام اور ٹائپ حاصل کرنے کے لیے دہرائے جاتے ہیں۔ کلید 'id' ہے اور قسم کی قدریں بولڈ کے طور پر ظاہر ہوتی ہیں۔
secondExample.html<ٹیمپلیٹ>
<مرکز>
<ٹیمپلیٹ برائے:each={array_of_objects} for:item= 'obj' for:index= 'انڈیکس' >
{obj.program} - {obj.type}
secondExample.js
// array_of_objects بنائیں جس میں کی تفصیلات ہوں۔ 10 مضامین
array_of_objects = [{id: 1 پروگرام: 'AWS' قسم: 'بادل' }،{id: 2 پروگرام: 'سیلز فورس' قسم: 'بادل' }،
{id: 3 پروگرام: 'PHP' قسم: 'ویب' }،{id: 4 پروگرام: 'جاوا' قسم: 'ویب/ڈیٹا' }،
{id: 5 پروگرام: 'ازگر' قسم: 'سب' }،{id: 6 پروگرام: 'HTML' قسم: 'ویب' }،
{id: 7 پروگرام: 'جے ایس' قسم: 'ویب' }،{id: 8 پروگرام: '.NET' قسم: 'ویب/ڈیٹا' }،
{id: 9 پروگرام: 'اوریکل' قسم: 'ڈیٹا' }،{id: 10 پروگرام: 'C#' قسم: 'ڈیٹا' }]
پورا کوڈ:
آؤٹ پٹ:
آپ دیکھ سکتے ہیں کہ تمام پروگرام ان کی اقسام کے ساتھ UI پر دکھائے جاتے ہیں۔
مثال 3:
آبجیکٹ (ID، پروگرام، قسم، اور عنوانات) کی ایک نیسٹڈ صف بنائیں۔ یہاں، عنوانات دوبارہ عناصر کی فہرست رکھیں گے۔ پہلے کے لیے:ہر ٹیمپلیٹ ہدایت میں، ہم پوری نیسٹڈ صف کو دہراتے ہیں۔ اس ٹیمپلیٹ کے اندر، ہم پچھلے ایٹریٹر کا استعمال کرتے ہوئے دوبارہ عنوانات کو دہراتے ہیں۔ اس کے بعد، ہم پروگرام، قسم، اور عنوانات کو مرکزی کے لیے:ہر ٹیمپلیٹ میں ظاہر کرتے ہیں۔
thirdComponent.html<ٹیمپلیٹ>
<مرکز>
<ٹیمپلیٹ برائے:each={data} for:item= 'ویل' for:index= 'انڈیکس' >
<ٹیمپلیٹ برائے:each={val.Topics} for:item= 'val1' >
پروگرام: {val.program} - {val.type} موضوعات: {val.Topics
thirdComponent.js
ڈیٹا = [{id: 1 پروگرام: 'AWS' قسم: 'بادل' ، عنوانات:[ 'تعارف' ، 'AWC لوازم' ]}،
{id: 2 پروگرام: 'سیلز فورس' قسم: 'بادل' ، عنوانات:[ 'ایڈمن' ، 'ترقی' ]}،
{id: 3 پروگرام: 'PHP' قسم: 'ویب' ، عنوانات:[ 'تعارف' ، 'PHP-MySQL' ]}]
پورا کوڈ:
آؤٹ پٹ:
تمام مضامین اس کی قسم اور عنوانات کے ساتھ دکھائے جاتے ہیں۔ ہر مضمون میں دو عنوانات ہوتے ہیں۔
مثال 4:
آئیے ان ریکارڈوں کی تکرار کرتے ہیں جو 'اکاؤنٹ' آبجیکٹ میں موجود ہیں۔ سب سے پہلے، ایک Apex کلاس لکھیں جو ریکارڈز کی فہرست واپس کرے (returnAcc() – طریقہ) جس میں اکاؤنٹ کی شناخت، نام، صنعت، اور اکاؤنٹ سٹینڈرڈ آبجیکٹ سے درجہ بندی والے فیلڈز شامل ہوں۔ 'js' فائل میں، ہم connectedcallback() کے اندر Apex (امپورٹ اسٹیٹمنٹ کے ذریعے) سے returnAcc() طریقہ استعمال کرتے ہیں۔ یہ اکاؤنٹس واپس کرتا ہے۔ آخر میں، ان اکاؤنٹس کو اکاؤنٹ کا نام اور صنعت حاصل کرنے کے لیے:ہر ٹیمپلیٹ ہدایت میں بیان کیا گیا ہے۔
AccountData.apxcشیئرنگ کلاس اکاؤنٹ ڈیٹا کے ساتھ عوامی {
@AuraEnabled(cacheable=true)
عوامی جامد فہرست
فہرست<اکاؤنٹ> اکاؤنٹ لسٹ = [چنیں آئی ڈی، نام، صنعت، اکاؤنٹ کی حد سے درجہ بندی 10 ];
واپسی اکاؤنٹ لسٹ؛
}
}
finalComponent.html
<ٹیمپلیٹ>
<ٹیمپلیٹ if:true={accounts}>
<ٹیمپلیٹ برائے:each={accounts} for:item= 'اکاؤنٹ_ریک' >
اکاؤنٹ: {account_rec.Name} انڈسٹری: {account_rec.Industry}
finalComponent.js
سے { LightningElement,track } درآمد کریں۔ 'قسمت' ;
سے واپسی اے سی سی درآمد کریں۔ '@salesforce/apex/AccountData.returnAcc' ;
ایکسپورٹ ڈیفالٹ کلاس FinalComponent LightningElement میں توسیع کرتا ہے {
@track اکاؤنٹس؛
@track کی خرابی؛
منسلک کال بیک(){
واپسی اے سی سی ()
// اکاؤنٹس واپس کریں۔
پھر (نتیجہ => {
this.accounts = نتیجہ؛
this.error = غیر وضاحتی؛
})
.catch(error => {
this.error = غلطی؛
this.accounts = غیر وضاحتی؛
});
}
}
آؤٹ پٹ:
صرف 10 اکاؤنٹس نام اور صنعت کے شعبوں کے ساتھ دکھائے جاتے ہیں۔
نتیجہ
ہم نے برائے:ہر ٹیمپلیٹ ہدایت پر تبادلہ خیال کیا جو دیے گئے ڈیٹا سے اشیاء کو واپس کرنے کے لیے استعمال ہوتا ہے۔ چار مختلف مثالیں فراہم کی گئی ہیں جن میں فہرست، اشیاء کی صف، نیسٹڈ آبجیکٹ اور سیلز فورس آبجیکٹ شامل ہیں۔ ڈیٹا کو 'js' فائل سے آنا ہوگا اور اسے for:each ٹیمپلیٹ میں استعمال کرنا ہوگا۔ اس بات کو یقینی بنائیں کہ آپ کو آخری مثال کے اجزاء کی تعیناتی کے دوران پہلے اپیکس کلاس کو تعینات کرنے کی ضرورت ہے۔