ప్రతి
LWCలో, for: ప్రతి అనేది టెంప్లేట్ ట్యాగ్‌తో ఉపయోగించబడుతుంది. ఇది ఇచ్చిన డేటా నుండి అంశాలను తిరిగి అందిస్తుంది. ఇది రెండు పారామితులను తీసుకుంటుంది. మేము డేటాను పేర్కొనాలి దీని కోసం: ప్రతి={డేటా} మరియు for:item=”variable” వేరియబుల్‌తో పేర్కొన్న ప్రస్తుత అంశాన్ని (ఇటరేటర్ నుండి) తీసుకుంటుంది. ది ఇండెక్స్=”ఇండెక్స్_వర్” కోసం ప్రస్తుత మూలకం సూచికను పేర్కొనే మూలకం సూచికను నిల్వ చేస్తుంది.
సింటాక్స్:
LWC (HTML కాంపోనెంట్)లో for:ప్రతి ఆదేశాన్ని ఎలా పేర్కొనాలో చూద్దాం. కోసం: సూచిక ఐచ్ఛికం.
'ఐటెమ్_వర్' కోసం: సూచిక= 'index_var' >
'1.0' ?>
<లక్ష్యాలు>
2. ఈ గైడ్‌లో మనం చర్చించబోయే అన్ని ఉదాహరణలలో, లాజిక్ “js” కోడ్గా అందించబడుతుంది. ఆ తర్వాత, మేము మొత్తం “js” కోడ్ని కలిగి ఉన్న స్క్రీన్ షాట్ను నిర్దేశిస్తాము.
ఉదాహరణ 1:
'firstComponent.js' ఫైల్‌లో 10 సబ్జెక్ట్లను కలిగి ఉండే జాబితాను క్రియేట్ చేద్దాం. దీని కోసం:ప్రతి టెంప్లేట్ ఆదేశాన్ని ఉపయోగించండి మరియు 'సబ్' ఇటరేటర్తో ఈ జాబితాను పునరావృతం చేయండి. పేరా ట్యాగ్ లోపల కీని ఈ ఇటరేటర్గా పేర్కొనండి మరియు సబ్జెక్ట్లను ప్రదర్శించండి.
firstExample.html<టెంప్లేట్>
<కేంద్రం>
'ఉప' కోసం: సూచిక= 'సూచిక' >
{sub}
firstExample.js
// కలిగి ఉన్న subjects_arrayని సృష్టించండి 10 సబ్జెక్టులు
subjects_array = [ 'AWS' , 'సేల్స్‌ఫోర్స్' , 'PHP' , 'జావా' , 'పైథాన్' , 'HTML' , 'JS' , 'జావా' , 'ఒరాకిల్' , 'సి#' ];
మొత్తం కోడ్:
అవుట్‌పుట్:
ఏదైనా వస్తువు యొక్క 'రికార్డ్' పేజీకి ఈ భాగాన్ని జోడించండి (మేము దానిని ఖాతా 'రికార్డ్' పేజీకి జోడిస్తాము). మొత్తం 10 అంశాలు UIలో ప్రదర్శించబడతాయి.
ఉదాహరణ 2:
ఇప్పుడు, మేము ఆబ్జెక్ట్‌ల శ్రేణిని “id”, ప్రోగ్రామ్ మరియు సబ్జెక్ట్‌లకు సంబంధించిన 10 రికార్డ్‌లతో టైప్ చేస్తాము. ప్రోగ్రామ్‌ని పొందడానికి మరియు టైప్ చేయడానికి ఇవి పునరావృతమవుతాయి. కీ 'id' మరియు టైప్ విలువలు బోల్డ్‌గా ప్రదర్శించబడతాయి.
secondExample.html<టెంప్లేట్>
<కేంద్రం>
'obj' కోసం: సూచిక= 'సూచిక' >
{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 ,కార్యక్రమం: 'JS' , రకం: 'వెబ్' },{id: 8 ,కార్యక్రమం: '.NET' , రకం: 'వెబ్/డేటా' },
{id: 9 ,కార్యక్రమం: 'ఒరాకిల్' , రకం: 'సమాచారం' },{id: 10 ,కార్యక్రమం: 'సి#' , రకం: 'సమాచారం' }];
మొత్తం కోడ్:
అవుట్‌పుట్:
అన్ని ప్రోగ్రామ్‌లు వాటి రకాలతో పాటు UIలో ప్రదర్శించబడడాన్ని మీరు చూడవచ్చు.
ఉదాహరణ 3:
వస్తువుల సమూహ శ్రేణిని సృష్టించండి (ఐడి, ప్రోగ్రామ్, రకం మరియు అంశాలు). ఇక్కడ, టాపిక్‌లు మళ్లీ మూలకాల జాబితాను కలిగి ఉంటాయి. మొదటి కోసం:ప్రతి టెంప్లేట్ డైరెక్టివ్‌లో, మేము మొత్తం సమూహ శ్రేణిని పునరావృతం చేస్తాము. ఈ టెంప్లేట్ లోపల, మేము మునుపటి ఇటరేటర్‌ని ఉపయోగించి మళ్లీ టాపిక్‌లను పునరావృతం చేస్తాము. తర్వాత, మేము ప్రోగ్రామ్, టైప్ మరియు టాపిక్‌లను ప్రధానంగా ప్రతి టెంప్లేట్‌లో ప్రదర్శిస్తాము.
thirdComponent.html<టెంప్లేట్>
<కేంద్రం>
'వాల్' కోసం: సూచిక= 'సూచిక' >
'val1' >
ప్రోగ్రామ్: {val.program} - {val.type} టాపిక్స్: {val.Topics}
మూడవ భాగం.js
డేటా = [{id: 1 ,కార్యక్రమం: 'AWS' , రకం: 'మేఘం' , అంశాలు:[ 'పరిచయం' , 'AWC అవసరాలు' ]},
{id: 2 ,కార్యక్రమం: 'సేల్స్‌ఫోర్స్' , రకం: 'మేఘం' , అంశాలు:[ 'అడ్మిన్' , 'అభివృద్ధి' ]},
{id: 3 ,కార్యక్రమం: 'PHP' , రకం: 'వెబ్' , అంశాలు:[ 'పరిచయం' , 'PHP-MySQL' ]}];
మొత్తం కోడ్:
అవుట్‌పుట్:
అన్ని సబ్జెక్ట్‌లు దాని రకం మరియు అంశాలతో ప్రదర్శించబడతాయి. ప్రతి సబ్జెక్ట్‌లో రెండు టాపిక్‌లు ఉంటాయి.
ఉదాహరణ 4:
'ఖాతా' ఆబ్జెక్ట్‌లో ఉన్న రికార్డులను పునరావృతం చేద్దాం. ముందుగా, అకౌంట్ స్టాండర్డ్ ఆబ్జెక్ట్ నుండి ఖాతా ID, పేరు, పరిశ్రమ మరియు రేటింగ్ ఫీల్డ్‌లను కలిగి ఉన్న రికార్డ్‌ల జాబితా (రిటర్న్అక్() - పద్ధతి)ని అందించే అపెక్స్ క్లాస్‌ను వ్రాయండి. “js” ఫైల్‌లో, కనెక్ట్ చేయబడిన కాల్‌బ్యాక్() లోపల అపెక్స్ (దిగుమతి స్టేట్‌మెంట్ ద్వారా) నుండి రిటర్న్Acc() పద్ధతిని మేము అమలు చేస్తాము. ఇది ఖాతాలను తిరిగి ఇస్తుంది. చివరగా, ఈ ఖాతాలు ఖాతా పేరు మరియు పరిశ్రమను పొందడానికి: ప్రతి టెంప్లేట్ ఆదేశంలో పేర్కొనబడ్డాయి.
AccountData.apxcషేరింగ్ క్లాస్ ఖాతా డేటాతో పబ్లిక్
@AuraEnabled(cacheable=true)
పబ్లిక్ స్టాటిక్ లిస్ట్
జాబితా<ఖాతా> ఖాతా జాబితా = [ఖాతా పరిమితి నుండి ఎంపిక ఐడి, పేరు, పరిశ్రమ, రేటింగ్ 10 ];
తిరిగి ఖాతా జాబితా;
}
}
finalComponent.html
<టెంప్లేట్>
'account_rec' >
ఖాతా: {account_rec.Name} పరిశ్రమ: {account_rec.Industry}
finalComponent.js
నుండి {LightningElement,track }ని దిగుమతి చేయండి 'అదృష్టం' ;
నుండి returnAccని దిగుమతి చేయండి '@salesforce/apex/AccountData.returnAcc' ;
ఎగుమతి డిఫాల్ట్ క్లాస్ FinalComponent లైట్నింగ్ ఎలిమెంట్‌ను పొడిగిస్తుంది {
@ట్రాక్ ఖాతాలు;
@ట్రాక్ లోపం;
కనెక్ట్కాల్బ్యాక్(){
రిటర్న్అక్()
// ఖాతాలను తిరిగి ఇవ్వండి
.అప్పుడు(ఫలితం => {
ఈ.ఖాతాలు = ఫలితం;
this.error = నిర్వచించబడని;
})
.catch(error => {
this.error = దోషము;
ఈ.ఖాతాలు = నిర్వచించబడని;
});
}
}
అవుట్‌పుట్:
పేరు మరియు పరిశ్రమ ఫీల్డ్‌లతో కేవలం 10 ఖాతాలు మాత్రమే ప్రదర్శించబడతాయి.
ముగింపు
మేము ఇచ్చిన డేటా నుండి అంశాలను తిరిగి ఇవ్వడానికి ఉపయోగించే ప్రతి టెంప్లేట్ ఆదేశం గురించి చర్చించాము. జాబితా, వస్తువుల శ్రేణి, సమూహ వస్తువులు మరియు సేల్స్‌ఫోర్స్ ఆబ్జెక్ట్‌లను కలిగి ఉన్న నాలుగు విభిన్న ఉదాహరణలు అందించబడ్డాయి. డేటా “js” ఫైల్ నుండి రావాలి మరియు ప్రతి టెంప్లేట్ కోసం దాన్ని ఉపయోగించాలి. చివరి ఉదాహరణ భాగాలను అమలు చేస్తున్నప్పుడు మీరు మొదట అపెక్స్ క్లాస్‌ని అమలు చేయాలని నిర్ధారించుకోండి.