प्रत्येक के लिए
LWC में, for:each एक निर्देश है जिसका उपयोग टेम्पलेट टैग के साथ किया जाता है। यह दिए गए डेटा से आइटम लौटाता है। इसमें दो पैरामीटर लगते हैं. हमें इसमें डेटा निर्दिष्ट करना होगा के लिए:प्रत्येक={डेटा} और के लिए: आइटम = 'चर' वर्तमान आइटम (इटरेटर से) लेता है जो एक चर के साथ निर्दिष्ट होता है। for:index=”index_var” तत्व सूचकांक को संग्रहीत करता है जो वर्तमान तत्व सूचकांक को निर्दिष्ट करता है।
वाक्य - विन्यास:
आइए देखें कि LWC (HTML घटक) में प्रत्येक निर्देश के लिए कैसे निर्दिष्ट करें। for:index वैकल्पिक है।
<टेम्पलेट for:each={data} for:item= 'आइटम_वर' के लिए:सूचकांक= 'सूचकांक_कहां' >
'1.0' ?>
<लक्ष्य>
<लक्ष्य>लाइटनिंग__रिकॉर्डपेज
<लक्ष्य>lightning__AppPage
<लक्ष्य>लाइटनिंग__होमपेज
2. इस गाइड में हम जिन सभी उदाहरणों पर चर्चा करने जा रहे हैं, उनमें तर्क 'जेएस' कोड के रूप में प्रदान किया जाएगा। उसके बाद, हम स्क्रीन शॉट निर्दिष्ट करते हैं जिसमें संपूर्ण 'जेएस' कोड शामिल होता है।
उदाहरण 1:
आइए एक सूची बनाएं जिसमें 'firstComponent.js' फ़ाइल में 10 विषय हों। प्रत्येक टेम्पलेट निर्देश के लिए उपयोग करें और इस सूची को 'उप' पुनरावर्तक के साथ पुनरावृत्त करें। पैराग्राफ टैग के अंदर इस इटरेटर के रूप में कुंजी निर्दिष्ट करें और विषयों को प्रदर्शित करें।
पहला उदाहरण.html<टेम्पलेट>
<लाइटनिंग-कार्ड शीर्षक= 'विषय सारणी' >
<केंद्र>
<टेम्पलेट for:each={subjects_array} for:item= 'विषय' के लिए:सूचकांक= 'अनुक्रमणिका' >
{sub}
पहला उदाहरण.जे.एस
// विषय_सरणी बनाएं जो धारण करे 10 विषयों
विषय_सरणी = [ 'एडब्ल्यूएस' , 'बिक्री बल' , 'पीएचपी' , 'जावा' , 'पायथन' , 'एचटीएमएल' , 'जेएस' , 'जावा' , 'आकाशवाणी' , 'सी#' ];
संपूर्ण कोड:
आउटपुट:
इस घटक को किसी भी ऑब्जेक्ट के 'रिकॉर्ड' पृष्ठ पर जोड़ें (हम इसे खाता 'रिकॉर्ड' पृष्ठ पर जोड़ते हैं)। सभी 10 तत्व यूआई पर प्रदर्शित होते हैं।
उदाहरण 2:
अब, हम ऑब्जेक्ट्स की एक सरणी बनाते हैं जो प्रोग्राम 'आईडी' है, और विषयों से संबंधित 10 रिकॉर्ड के साथ टाइप करते हैं। इन्हें प्रोग्राम और प्रकार प्राप्त करने के लिए पुनरावृत्त किया जाता है। कुंजी 'आईडी' है और प्रकार मान बोल्ड के रूप में प्रदर्शित होते हैं।
दूसरा उदाहरण.html<टेम्पलेट>
<लाइटनिंग-कार्ड शीर्षक= 'विषयों की श्रृंखला' >
<केंद्र>
<टेम्पलेट for:each={array_of_objects} for:item= 'ओबीजे' के लिए:सूचकांक= 'अनुक्रमणिका' >
{obj.program} - {obj.type}
दूसरा उदाहरण.जे.एस
// array_of_objects बनाएं जिसमें विवरण हों 10 विषयों
array_of_objects = [{आईडी: 1 ,कार्यक्रम: 'एडब्ल्यूएस' , प्रकार: 'बादल' },{पहचान: 2 ,कार्यक्रम: 'बिक्री बल' , प्रकार: 'बादल' },
{पहचान: 3 ,कार्यक्रम: 'पीएचपी' , प्रकार: 'वेब' },{पहचान: 4 ,कार्यक्रम: 'जावा' , प्रकार: 'वेब/डेटा' },
{पहचान: 5 ,कार्यक्रम: 'पायथन' , प्रकार: 'सभी' },{पहचान: 6 ,कार्यक्रम: 'एचटीएमएल' , प्रकार: 'वेब' },
{पहचान: 7 ,कार्यक्रम: 'जेएस' , प्रकार: 'वेब' },{पहचान: 8 ,कार्यक्रम: '।जाल' , प्रकार: 'वेब/डेटा' },
{पहचान: 9 ,कार्यक्रम: 'आकाशवाणी' , प्रकार: 'डेटा' },{पहचान: 10 ,कार्यक्रम: 'सी#' , प्रकार: 'डेटा' }];
संपूर्ण कोड:
आउटपुट:
आप देख सकते हैं कि सभी प्रोग्राम उनके प्रकारों के साथ यूआई पर प्रदर्शित होते हैं।
उदाहरण 3:
ऑब्जेक्ट्स (आईडी, प्रोग्राम, प्रकार और विषय) की एक नेस्टेड सरणी बनाएं। यहां, विषयों में फिर से तत्वों की एक सूची होगी। पहले for:each टेम्पलेट निर्देश में, हम संपूर्ण नेस्टेड सरणी को पुनरावृत्त करते हैं। इस टेम्पलेट के अंदर, हम पिछले इटरेटर का उपयोग करके विषयों को फिर से दोहराते हैं। इसके बाद, हम प्रत्येक टेम्पलेट के लिए मुख्य रूप से प्रोग्राम, प्रकार और विषय प्रदर्शित करते हैं।
थर्डकंपोनेंट.एचटीएमएल<टेम्पलेट>
<लाइटनिंग-कार्ड शीर्षक= 'विषयों की श्रृंखला' >
<केंद्र>
<टेम्पलेट for:each={data} for:item= 'वैल' के लिए:सूचकांक= 'अनुक्रमणिका' >
<टेम्पलेट for:each={val.Topics} for:item= 'वैल1' >
कार्यक्रम: {val.program} - {val.type} विषय: {वैल.विषय}
थर्डकंपोनेंट.जेएस
डेटा = [{आईडी: 1 ,कार्यक्रम: 'एडब्ल्यूएस' , प्रकार: 'बादल' , विषय:[ 'परिचय' , 'AWC अनिवार्य' ]},
{पहचान: 2 ,कार्यक्रम: 'बिक्री बल' , प्रकार: 'बादल' , विषय:[ 'व्यवस्थापक' , 'विकास' ]},
{पहचान: 3 ,कार्यक्रम: 'पीएचपी' , प्रकार: 'वेब' , विषय:[ 'परिचय' , 'PHP-MySQL' ]}];
संपूर्ण कोड:
आउटपुट:
सभी विषयों को उनके प्रकार और विषयों के साथ प्रदर्शित किया जाता है। प्रत्येक विषय में दो विषय होते हैं।
उदाहरण 4:
आइए उन रिकॉर्ड्स को पुनरावृत्त करें जो 'खाता' ऑब्जेक्ट में मौजूद हैं। सबसे पहले, एक एपेक्स क्लास लिखें जो रिकॉर्ड की सूची (रिटर्नएसीसी() - विधि) लौटाता है जिसमें खाता मानक ऑब्जेक्ट से खाता आईडी, नाम, उद्योग और रेटिंग फ़ील्ड शामिल होते हैं। 'जेएस' फ़ाइल में, हम कनेक्टेडकॉलबैक() के अंदर एपेक्स से रिटर्नएसीसी() विधि (आयात विवरण के माध्यम से) शुरू करते हैं। यह खाते लौटाता है. अंत में, इन खातों को खाता नाम और उद्योग प्राप्त करने के लिए प्रत्येक टेम्पलेट निर्देश में निर्दिष्ट किया गया है।
अकाउंटडेटा.apxcशेयरिंग क्लास अकाउंटडेटा के साथ सार्वजनिक {
@AuraEnabled(कैशेबल=सत्य)
सार्वजनिक स्थैतिक सूची<खाता> returnAcc(){
सूची <खाता> खाता सूची = [खाता सीमा से आईडी, नाम, उद्योग, रेटिंग चुनें 10 ];
वापसी खाता सूची;
}
}
फाइनलकंपोनेंट.एचटीएमएल
<टेम्पलेट>
<लाइटनिंग-कार्ड शीर्षक= 'खातों की प्रदर्शन सूची' >
<टेम्पलेट if:true={accounts}>
<टेम्पलेट for:each={accounts} for:item= 'account_rec' >
खाता: {account_rec.Name} उद्योग: {account_rec.Industry}
फाइनलकंपोनेंट.जेएस
{ LightningElement,track } से आयात करें 'भाग्य' ;
से रिटर्नएसीसी आयात करें '@salesforce/apex/AccountData.returnAcc' ;
निर्यात डिफ़ॉल्ट क्लास फ़ाइनलकंपोनेंट लाइटनिंगएलिमेंट का विस्तार करता है {
@ट्रैक खाते;
@ट्रैक त्रुटि;
कनेक्टेडकॉलबैक(){
रिटर्नएसीसी()
// खाते लौटाएं
.तब(परिणाम => {
यह.खाता = परिणाम;
यह.त्रुटि = अपरिभाषित;
})
.पकड़(त्रुटि => {
यह.त्रुटि = त्रुटि;
यह.खाता = अपरिभाषित;
});
}
}
आउटपुट:
केवल 10 खाते नाम और उद्योग फ़ील्ड के साथ प्रदर्शित होते हैं।
निष्कर्ष
हमने प्रत्येक टेम्पलेट निर्देश के लिए चर्चा की जिसका उपयोग दिए गए डेटा से आइटम वापस करने के लिए किया जाता है। चार अलग-अलग उदाहरण दिए गए हैं जिनमें सूची, ऑब्जेक्ट की सरणी, नेस्टेड ऑब्जेक्ट और सेल्सफोर्स ऑब्जेक्ट शामिल हैं। डेटा को 'जेएस' फ़ाइल से आना होगा और इसका उपयोग प्रत्येक टेम्पलेट के लिए करना होगा। सुनिश्चित करें कि आपको अंतिम उदाहरण घटकों को तैनात करते समय पहले एपेक्स क्लास को तैनात करने की आवश्यकता है।