ஒவ்வொரு
LWC இல், for: ஒவ்வொன்றும் டெம்ப்ளேட் குறிச்சொல்லுடன் பயன்படுத்தப்படும் கட்டளையாகும். இது கொடுக்கப்பட்ட தரவிலிருந்து உருப்படிகளை வழங்குகிறது. இது இரண்டு அளவுருக்கள் எடுக்கும். இல் உள்ள தரவை நாம் குறிப்பிட வேண்டும் ஒவ்வொருவருக்கும்={data} மற்றும் for:item=”மாறி” மாறியுடன் குறிப்பிடப்பட்ட தற்போதைய உருப்படியை (இடிரேட்டரிலிருந்து) எடுக்கிறது. தி க்கு:index=”index_var” தற்போதைய உறுப்பு குறியீட்டைக் குறிப்பிடும் உறுப்பு குறியீட்டை சேமிக்கிறது.
தொடரியல்:
LWC (HTML கூறு) இல் for:ஒவ்வொரு கட்டளையையும் எவ்வாறு குறிப்பிடுவது என்று பார்க்கலாம். for:index விருப்பமானது.
'item_var' க்கு:இண்டெக்ஸ்= 'index_var' >
'1.0' ?>
<இலக்குகள்>
<இலக்கு>மின்னல்__பதிவுப்பக்கம்
<இலக்கு>மின்னல்__முகப்புப்பக்கம்
2. இந்த வழிகாட்டியில் நாம் விவாதிக்கப் போகும் அனைத்து எடுத்துக்காட்டுகளிலும், தர்க்கம் 'js' குறியீடாக வழங்கப்படும். அதன் பிறகு, முழு 'js' குறியீட்டையும் உள்ளடக்கிய ஸ்கிரீன் ஷாட்டை நாங்கள் குறிப்பிடுகிறோம்.
எடுத்துக்காட்டு 1:
'firstComponent.js' கோப்பில் 10 பாடங்களைக் கொண்ட பட்டியலை உருவாக்குவோம். for:ஒவ்வொரு டெம்ப்ளேட் கட்டளையையும் பயன்படுத்தவும் மற்றும் இந்த பட்டியலை 'துணை' மறு செய்கை மூலம் மீண்டும் செய்யவும். பத்தி குறிச்சொல்லின் உள்ளே விசையை இந்த மறு செய்கையாகக் குறிப்பிட்டு பாடங்களைக் காட்டவும்.
firstExample.html<வார்ப்புரு>
<மின்னல் அட்டை தலைப்பு= 'பாடங்கள் வரிசை' >
<சென்டர்>
'துணை' க்கு:இண்டெக்ஸ்= 'குறியீடு' >
{sub}
firstExample.js
// பாடங்கள்_வரிசையை உருவாக்கவும் 10 பாடங்கள்
subjects_array = [ 'AWS' , 'விற்பனைக்குழு' , 'PHP' , 'ஜாவா' , 'பைத்தான்' , 'HTML' , 'ஜேஎஸ்' , 'ஜாவா' , 'ஆரக்கிள்' , 'சி#' ];
முழு குறியீடு:
வெளியீடு:
எந்தவொரு பொருளின் 'பதிவு' பக்கத்தில் இந்த கூறுகளைச் சேர்க்கவும் (நாங்கள் அதை 'பதிவு' கணக்கில் சேர்க்கிறோம்). அனைத்து 10 கூறுகளும் UI இல் காட்டப்படும்.
எடுத்துக்காட்டு 2:
இப்போது, 'ஐடி', நிரல் மற்றும் தலைப்புகள் தொடர்பான 10 பதிவுகளுடன் வகைகளின் வரிசையை உருவாக்குகிறோம். நிரல் மற்றும் வகையைப் பெற இவை மீண்டும் மீண்டும் செய்யப்படுகின்றன. முக்கியமானது 'ஐடி' மற்றும் வகை மதிப்புகள் தடிமனாக காட்டப்படும்.
secondExample.html<வார்ப்புரு>
<மின்னல் அட்டை தலைப்பு= 'பாடங்களின் வரிசை' >
<சென்டர்>
'obj' க்கு:இண்டெக்ஸ்= 'குறியீடு' >
{obj.program} - {obj.type}
secondExample.js
// array_of_objects விவரங்களைக் கொண்டிருக்கும் 10 பாடங்கள்
array_of_objects = [{ஐடி: 1 ,நிரல்: 'AWS' , வகை: 'மேகம்' },{ஐடி: 2 ,நிரல்: 'விற்பனைக்குழு' , வகை: 'மேகம்' },
{id: 3 ,நிரல்: 'PHP' , வகை: 'வலை' },{ஐடி: 4 ,நிரல்: 'ஜாவா' , வகை: 'இணையம்/தரவு' },
{id: 5 ,நிரல்: 'பைத்தான்' , வகை: 'அனைத்தும்' },{ஐடி: 6 ,நிரல்: 'HTML' , வகை: 'வலை' },
{id: 7 ,நிரல்: 'ஜேஎஸ்' , வகை: 'வலை' },{ஐடி: 8 ,நிரல்: '.NET' , வகை: 'இணையம்/தரவு' },
{id: 9 ,நிரல்: 'ஆரக்கிள்' , வகை: 'தகவல்கள்' },{ஐடி: 10 ,நிரல்: 'சி#' , வகை: 'தகவல்கள்' }];
முழு குறியீடு:
வெளியீடு:
அனைத்து நிரல்களும் அவற்றின் வகைகளுடன் UI இல் காட்டப்படுவதை நீங்கள் காணலாம்.
எடுத்துக்காட்டு 3:
பொருள்களின் உள்ளமை வரிசையை உருவாக்கவும் (ஐடி, நிரல், வகை மற்றும் தலைப்புகள்). இங்கே, தலைப்புகள் மீண்டும் உறுப்புகளின் பட்டியலை வைத்திருக்கும். முதலில்: ஒவ்வொரு டெம்ப்ளேட் கட்டளையிலும், முழு உள்ளமைக்கப்பட்ட வரிசையையும் மீண்டும் செய்கிறோம். இந்த டெம்ப்ளேட்டின் உள்ளே, முந்தைய செயலியைப் பயன்படுத்தி மீண்டும் தலைப்புகளை மீண்டும் செய்கிறோம். அடுத்து, ஒவ்வொரு டெம்ப்ளேட்டிற்கான நிரல், வகை மற்றும் தலைப்புகளை பிரதானமாக காண்பிக்கிறோம்.
thirdComponent.html<வார்ப்புரு>
<மின்னல் அட்டை தலைப்பு= 'பாடங்களின் வரிசை' >
<சென்டர்>
'வால்' க்கு:இண்டெக்ஸ்= 'குறியீடு' >
'val1' >
PROGRAM: {val.program} - {val.type} தலைப்புகள்: {val.Topics}
ThirdComponent.js
தரவு = [{ஐடி: 1 ,நிரல்: 'AWS' , வகை: 'மேகம்' , தலைப்புகள்:[ 'அறிமுகம்' , 'AWC அத்தியாவசியங்கள்' ]},
{id: 2 ,நிரல்: 'விற்பனைக்குழு' , வகை: 'மேகம்' , தலைப்புகள்:[ 'நிர்வாகம்' , 'வளர்ச்சி' ]},
{id: 3 ,நிரல்: 'PHP' , வகை: 'வலை' , தலைப்புகள்:[ 'அறிமுகம்' , 'PHP-MySQL' ]}];
முழு குறியீடு:
வெளியீடு:
அனைத்து பாடங்களும் அதன் வகை மற்றும் தலைப்புகளுடன் காட்டப்படும். ஒவ்வொரு பாடமும் இரண்டு தலைப்புகளைக் கொண்டுள்ளது.
எடுத்துக்காட்டு 4:
'கணக்கு' பொருளில் இருக்கும் பதிவுகளை மீண்டும் செய்வோம். முதலில், கணக்கு ஐடி, பெயர், தொழில் மற்றும் மதிப்பீடு புலங்களை உள்ளடக்கிய பதிவுகளின் பட்டியலை (returnAcc() – முறை) வழங்கும் அபெக்ஸ் வகுப்பை எழுதவும். “js” கோப்பில், அபெக்ஸிலிருந்து (இறக்குமதி அறிக்கை மூலம்) இணைக்கப்பட்ட கால்பேக்() க்குள் ரிட்டர்ன்ஆக்() முறையைப் பயன்படுத்துகிறோம். இது கணக்குகளைத் திருப்பித் தருகிறது. இறுதியாக, இந்தக் கணக்குகள் கணக்குப் பெயர் மற்றும் தொழில்துறையைப் பெறுவதற்கு: ஒவ்வொரு டெம்ப்ளேட் கட்டளையிலும் குறிப்பிடப்பட்டுள்ளன.
AccountData.apxcகணக்குத் தரவைப் பகிரும் வகுப்புடன் பொது
@AuraEnabled(cacheable=true)
பொது நிலையான பட்டியல்
பட்டியல்<கணக்கு> கணக்குப் பட்டியல் = [தேர்வு ஐடி, பெயர், தொழில், கணக்கு வரம்பிலிருந்து மதிப்பீடு 10 ];
கணக்குப் பட்டியலைத் திருப்பி விடுங்கள்;
}
}
finalComponent.html
<வார்ப்புரு>
<மின்னல் அட்டை தலைப்பு= 'கணக்குகளின் பட்டியலைக் காட்டு' >
'கணக்கு_rec' >
கணக்கு: {account_rec.Name} தொழில்: {account_rec.Industry}
finalComponent.js
இலிருந்து { LightningElement,track } இறக்குமதி 'அதிர்ஷ்டம்' ;
இருந்து returnAcc இறக்குமதி '@salesforce/apex/AccountData.returnAcc' ;
ஏற்றுமதி இயல்புநிலை வகுப்பு FinalComponent LightningElement நீட்டிக்கிறது {
@ட்ராக் கணக்குகள்;
@டிராக் பிழை;
இணைக்கப்பட்ட அழைப்பு(){
returnAcc()
// கணக்குகளை திருப்பி அனுப்பு
.பின்(முடிவு => {
இந்த.கணக்குகள் = முடிவு;
இது.பிழை = வரையறுக்கப்படாத;
})
.catch(பிழை => {
இது.பிழை = பிழை;
இந்த.கணக்குகள் = வரையறுக்கப்படாத;
});
}
}
வெளியீடு:
பெயர் மற்றும் தொழில் துறைகளுடன் 10 கணக்குகள் மட்டுமே காட்டப்படும்.
முடிவுரை
கொடுக்கப்பட்ட தரவிலிருந்து உருப்படிகளைத் திரும்பப் பெறப் பயன்படும்:ஒவ்வொரு டெம்ப்ளேட் கட்டளையையும் நாங்கள் விவாதித்தோம். பட்டியல், பொருள்களின் வரிசை, உள்ளமைக்கப்பட்ட பொருள்கள் மற்றும் சேல்ஸ்ஃபோர்ஸ் பொருள்களை உள்ளடக்கிய நான்கு வெவ்வேறு எடுத்துக்காட்டுகள் வழங்கப்பட்டுள்ளன. தரவு 'js' கோப்பிலிருந்து வர வேண்டும் மற்றும் ஒவ்வொரு டெம்ப்ளேட்டில் அதை பயன்படுத்த வேண்டும். கடைசி எடுத்துக்காட்டு கூறுகளை வரிசைப்படுத்தும் போது முதலில் நீங்கள் Apex வகுப்பை வரிசைப்படுத்த வேண்டும் என்பதை உறுதிப்படுத்தவும்.