Για κάθε
Στο LWC, το for:each είναι μια οδηγία που χρησιμοποιείται με την ετικέτα προτύπου. Επιστρέφει τα στοιχεία από τα δεδομένα. Χρειάζονται δύο παραμέτρους. Πρέπει να καθορίσουμε τα δεδομένα στο for:each={data} και for:item=”variable” παίρνει το τρέχον στοιχείο (από το iterator) που καθορίζεται με μια μεταβλητή. ο for:index='index_var' αποθηκεύει το ευρετήριο στοιχείου που καθορίζει το ευρετήριο τρέχοντος στοιχείου.
Σύνταξη:
Ας δούμε πώς να καθορίσετε την οδηγία για:κάθε στο LWC (HTML Component). Το ευρετήριο for: είναι προαιρετικό.
'item_var' για:index= 'index_var' >
'1.0' ?>
<στόχοι>
2. Σε όλα τα παραδείγματα που θα συζητήσουμε σε αυτόν τον οδηγό, η λογική θα παρέχεται ως κώδικας «js». Μετά από αυτό, καθορίζουμε το στιγμιότυπο οθόνης που περιλαμβάνει ολόκληρο τον κώδικα 'js'.
Παράδειγμα 1:
Ας δημιουργήσουμε μια λίστα που περιέχει 10 θέματα στο αρχείο 'firstComponent.js'. Χρησιμοποιήστε την οδηγία για: κάθε πρότυπο και επαναλάβετε αυτήν τη λίστα με τον επαναλήπτη 'υπο'. Καθορίστε το κλειδί ως αυτόν τον επαναλήπτη μέσα στην ετικέτα παραγράφου και εμφανίστε τα θέματα.
firstExample.html<πρότυπο>
<τίτλος κάρτας αστραπής= 'Πίνακας θεμάτων' >
<κέντρο>
<πρότυπο for:each={subjects_array} for:item= 'υπο' για:index= 'δείκτης' >
{sub}
firstExample.js
// Δημιουργία topics_array που ισχύει 10 μαθήματα
συστοιχία θεμάτων = [ 'AWS' , 'Salesforce' , 'PHP' , 'Ιάβα' , 'Πύθων' , 'HTML' , 'JS' , 'Ιάβα' , 'Μαντείο' , 'ΝΤΟ#' ];
Ολόκληρος ο κωδικός:
Παραγωγή:
Προσθέστε αυτό το στοιχείο στη σελίδα 'Εγγραφή' οποιουδήποτε αντικειμένου (το προσθέτουμε στη σελίδα 'Εγγραφή' λογαριασμού). Και τα 10 στοιχεία εμφανίζονται στη διεπαφή χρήστη.
Παράδειγμα 2:
Τώρα, δημιουργούμε έναν πίνακα αντικειμένων που είναι το 'id', το πρόγραμμα και πληκτρολογούμε 10 εγγραφές που σχετίζονται με Θέματα. Αυτά επαναλαμβάνονται για να λάβετε το πρόγραμμα και να πληκτρολογήσετε. Το κλειδί είναι το 'id' και οι τιμές τύπου εμφανίζονται με έντονη γραφή.
secondExample.html<πρότυπο>
<τίτλος κάρτας αστραπής= 'Σειρά θεμάτων' >
<κέντρο>
'obj' για:index= 'δείκτης' >
{obj.program} - {obj.type}
secondExample.js
// Δημιουργία array_of_objects που περιέχει λεπτομέρειες 10 μαθήματα
array_of_objects = [{id: 1 ,πρόγραμμα: 'AWS' , τύπος: 'Σύννεφο' },{ταυτότητα: 2 ,πρόγραμμα: 'Salesforce' , τύπος: 'Σύννεφο' },
{ταυτότητα: 3 ,πρόγραμμα: 'PHP' , τύπος: 'Ιστός' },{ταυτότητα: 4 ,πρόγραμμα: 'Ιάβα' , τύπος: 'Ιστός/Δεδομένα' },
{ταυτότητα: 5 ,πρόγραμμα: 'Πύθων' , τύπος: 'Ολα' },{ταυτότητα: 6 ,πρόγραμμα: 'HTML' , τύπος: 'Ιστός' },
{ταυτότητα: 7 ,πρόγραμμα: 'JS' , τύπος: 'Ιστός' },{ταυτότητα: 8 ,πρόγραμμα: '.ΚΑΘΑΡΑ' , τύπος: 'Ιστός/Δεδομένα' },
{ταυτότητα: 9 ,πρόγραμμα: 'Μαντείο' , τύπος: 'Δεδομένα' },{ταυτότητα: 10 ,πρόγραμμα: 'ΝΤΟ#' , τύπος: 'Δεδομένα' }];
Ολόκληρος ο κωδικός:
Παραγωγή:
Μπορείτε να δείτε ότι όλα τα προγράμματα εμφανίζονται στο UI μαζί με τους τύπους τους.
Παράδειγμα 3:
Δημιουργήστε έναν ένθετο πίνακα αντικειμένων (αναγνωριστικό, πρόγραμμα, τύπος και θέματα). Εδώ, τα θέματα θα έχουν και πάλι μια λίστα στοιχείων. Στην πρώτη οδηγία για:κάθε πρότυπο, επαναλαμβάνουμε ολόκληρο τον ένθετο πίνακα. Μέσα σε αυτό το πρότυπο, επαναλαμβάνουμε τα θέματα ξανά χρησιμοποιώντας τον προηγούμενο επαναλήπτη. Στη συνέχεια, εμφανίζουμε το πρόγραμμα, τον τύπο και τα θέματα στην κύρια για:κάθε πρότυπο.
thirdComponent.html<πρότυπο>
<τίτλος κάρτας αστραπής= 'Σειρά θεμάτων' >
<κέντρο>
'val' για:index= 'δείκτης' >
'val1' >
ΠΡΟΓΡΑΜΜΑ: {val.program} - {val.type} ΘΕΜΑΤΑ: {val.Topics}
thirdComponent.js
δεδομένα = [{id: 1 ,πρόγραμμα: 'AWS' , τύπος: 'Σύννεφο' , Θέματα:[ 'Εισαγωγή' , 'Απαραίτητα AWC' ]},
{ταυτότητα: 2 ,πρόγραμμα: 'Salesforce' , τύπος: 'Σύννεφο' , Θέματα:[ 'Διαχειριστής' , 'Ανάπτυξη' ]},
{ταυτότητα: 3 ,πρόγραμμα: 'PHP' , τύπος: 'Ιστός' , Θέματα:[ 'Εισαγωγή' , 'PHP-MySQL' ]}];
Ολόκληρος ο Κωδικός:
Παραγωγή:
Εμφανίζονται όλα τα θέματα με τον τύπο και τα θέματα. Κάθε θέμα περιλαμβάνει δύο θέματα.
Παράδειγμα 4:
Ας επαναλάβουμε τις εγγραφές που υπάρχουν στο αντικείμενο 'Λογαριασμός'. Πρώτα, γράψτε μια κλάση Apex που επιστρέφει τη λίστα των εγγραφών (returnAcc() – μέθοδος) που περιλαμβάνει τα πεδία Account ID, Name, Industry και Rating από το αντικείμενο Account Standard. Στο αρχείο “js”, καλούμε τη μέθοδο returnAcc() από το Apex (μέσω της δήλωσης εισαγωγής) μέσα στη συνδεόμενη κλήση(). Αυτό επιστρέφει τους λογαριασμούς. Τέλος, αυτοί οι λογαριασμοί καθορίζονται στην οδηγία για: κάθε πρότυπο για να λάβετε το όνομα λογαριασμού και τον κλάδο.
AccountData.apxcδημόσιο με κοινή χρήση κατηγορίας AccountData {
@AuraEnabled(cacheable=true)
δημόσια στατική λίστα<Λογαριασμός> returnAcc(){
List
Επιστροφή λογαριασμούΛίστα?
}
}
finalComponent.html
<πρότυπο>
<τίτλος κάρτας αστραπής= 'Εμφάνιση λίστας λογαριασμών' >
'account_rec' >
Λογαριασμός: {account_rec.Name} Βιομηχανία: {account_rec.Industry}
finalComponent.js
εισαγωγή { LightningElement,track } από 'τυχη' ;
Εισαγωγή επιστροφήΣυμ. από '@salesforce/apex/AccountData.returnAcc' ;
εξαγωγή προεπιλεγμένης κλάσης FinalComponent επεκτείνει το LightningElement {
@track λογαριασμούς;
Σφάλμα @track;
ConnectCallback(){
returnAcc()
// Επιστρέψτε τους λογαριασμούς
.τότε(αποτέλεσμα => {
this.accounts = αποτέλεσμα;
this.error = απροσδιόριστο;
})
.catch(error => {
this.error = σφάλμα;
this.accounts = απροσδιόριστο;
});
}
}
Παραγωγή:
Εμφανίζονται μόνο 10 λογαριασμοί με τα πεδία Όνομα και Κλάδος.
συμπέρασμα
Συζητήσαμε την οδηγία για: κάθε πρότυπο που χρησιμοποιείται για την επιστροφή των στοιχείων από τα δεδομένα. Παρέχονται τέσσερα διαφορετικά παραδείγματα που περιλαμβάνουν τη λίστα, τον πίνακα αντικειμένων, τα ένθετα αντικείμενα και τα αντικείμενα Salesforce. Τα δεδομένα πρέπει να προέρχονται από το αρχείο 'js' και να το χρησιμοποιούν στο πρότυπο for:κάθε. Βεβαιωθείτε ότι πρέπει να αναπτύξετε πρώτα την κλάση Apex κατά την ανάπτυξη των τελευταίων παραδειγμάτων στοιχείων.