Für jede
In LWC ist for:each eine Direktive, die mit dem Template-Tag verwendet wird. Es gibt die Elemente aus den angegebenen Daten zurück. Es werden zwei Parameter benötigt. Wir müssen die Daten im angeben for:each={data} Und for:item=“Variable“ Nimmt das aktuelle Element (vom Iterator), das mit einer Variablen angegeben ist. Der for:index=“index_var“ speichert den Elementindex, der den aktuellen Elementindex angibt.
Syntax:
Sehen wir uns an, wie man die for:each-Direktive im LWC (HTML-Komponente) angibt. Der for:index ist optional.
„1,0“ ?>
2. In allen Beispielen, die wir in diesem Handbuch besprechen werden, wird die Logik als „js“-Code bereitgestellt. Danach geben wir den Screenshot an, der den gesamten „js“-Code enthält.
Beispiel 1:
Erstellen wir eine Liste mit 10 Themen in der Datei „firstComponent.js“. Verwenden Sie die Vorlagenanweisung for:each und iterieren Sie diese Liste mit dem „sub“-Iterator. Geben Sie den Schlüssel als diesen Iterator im Absatz-Tag an und zeigen Sie die Betreffzeilen an.
erstesBeispiel.html„sub“ für:index= 'Index' >
{sub}
firstExample.js
// Erstelle ein subject_array, das enthält 10 Fächer
subject_array = [ „AWS“ , 'Zwangsversteigerung' , „PHP“ , 'Java' , 'Python' , „HTML“ , „JS“ , 'Java' , 'Orakel' , 'C#' ];
Gesamter Code:
Ausgabe:
Fügen Sie diese Komponente zur Seite „Datensatz“ eines beliebigen Objekts hinzu (wir fügen sie der Seite „Datensatz“ des Kontos hinzu). Alle 10 Elemente werden auf der Benutzeroberfläche angezeigt.
Beispiel 2:
Jetzt erstellen wir ein Array von Objekten, das „id“, das Programm, ist, und geben 10 Datensätze ein, die sich auf Betreffs beziehen. Diese werden iteriert, um das Programm und den Typ zu erhalten. Der Schlüssel ist die „id“ und die Typwerte werden fett dargestellt.
zweites Beispiel.html„obj“ für:index= 'Index' >
{obj.program} - {obj.type}
secondExample.js
// Array_of_objects erstellen, das Details von enthält 10 Fächer
array_of_objects = [{id: 1 ,Programm: „AWS“ , Typ: 'Wolke' },{Ausweis: 2 ,Programm: 'Zwangsversteigerung' , Typ: 'Wolke' },
{Ausweis: 3 ,Programm: „PHP“ , Typ: 'Netz' },{Ausweis: 4 ,Programm: 'Java' , Typ: „Web/Daten“ },
{Ausweis: 5 ,Programm: 'Python' , Typ: 'Alle' },{Ausweis: 6 ,Programm: „HTML“ , Typ: 'Netz' },
{Ausweis: 7 ,Programm: „JS“ , Typ: 'Netz' },{Ausweis: 8 ,Programm: '.NETZ' , Typ: „Web/Daten“ },
{Ausweis: 9 ,Programm: 'Orakel' , Typ: 'Daten' },{Ausweis: 10 ,Programm: 'C#' , Typ: 'Daten' }];
Gesamter Code:
Ausgabe:
Sie können sehen, dass alle Programme zusammen mit ihren Typen auf der Benutzeroberfläche angezeigt werden.
Beispiel 3:
Erstellen Sie ein verschachteltes Array von Objekten (ID, Programm, Typ und Themen). Auch hier enthalten die Themen wieder eine Liste von Elementen. In der ersten for:each-Vorlagendirektive iterieren wir das gesamte verschachtelte Array. Innerhalb dieser Vorlage iterieren wir die Themen erneut mit dem vorherigen Iterator. Als Nächstes zeigen wir das Programm, den Typ und die Themen in der Hauptvorlage „for:each“ an.
dritteKomponente.html„val1“ >
PROGRAMM: {val.program} - {val.type} THEMEN: {val.Topics
ThirdComponent.js
Daten = [{id: 1 ,Programm: „AWS“ , Typ: 'Wolke' , Themen:[ 'Einführung' , „AWC-Grundlagen“ ]},
{Ausweis: 2 ,Programm: 'Zwangsversteigerung' , Typ: 'Wolke' , Themen:[ 'Administrator' , 'Entwicklung' ]},
{Ausweis: 3 ,Programm: „PHP“ , Typ: 'Netz' , Themen:[ 'Einführung' , „PHP-MySQL“ ]}];
Gesamter Code:
Ausgabe:
Alle Themen werden mit Typ und Themen angezeigt. Jedes Fach umfasst zwei Themen.
Beispiel 4:
Lassen Sie uns die Datensätze iterieren, die im Objekt „Konto“ vorhanden sind. Schreiben Sie zunächst eine Apex-Klasse, die die Liste der Datensätze zurückgibt (returnAcc() – Methode), die die Felder „Konto-ID“, „Name“, „Branche“ und „Bewertung“ aus dem Konto-Standardobjekt enthält. In der „js“-Datei rufen wir die returnAcc()-Methode von Apex (über die Import-Anweisung) innerhalb von connectedcallback() auf. Dadurch werden die Konten zurückgegeben. Schließlich werden diese Konten in der Vorlagenanweisung for:each angegeben, um den Kontonamen und die Branche zu erhalten.
AccountData.apxcöffentlich mit Freigabeklasse AccountData {
@AuraEnabled(cacheable=true)
öffentliche statische Liste
List
return accountList;
}
}
finalComponent.html
„account_rec“ >
Konto: {account_rec.Name} Branche: {account_rec.Industry}
finalComponent.js
importiere { LightningElement,track } aus 'Glück' ;
returnAcc importieren aus '@salesforce/apex/AccountData.returnAcc' ;
Standardklasse exportieren FinalComponent erweitert LightningElement {
@track-Konten;
@track-Fehler;
connectedCallback(){
returnAcc()
// Die Konten zurückgeben
.then(result => {
this.accounts = Ergebnis;
this.error = undefiniert;
})
.catch(error => {
this.error = Fehler;
this.accounts = undefiniert;
});
}
}
Ausgabe:
Mit den Feldern „Name“ und „Branche“ werden nur 10 Konten angezeigt.
Abschluss
Wir haben die for:each-Vorlagendirektive besprochen, die verwendet wird, um die Elemente aus den angegebenen Daten zurückzugeben. Es werden vier verschiedene Beispiele bereitgestellt, darunter die Liste, das Array von Objekten, verschachtelte Objekte und Salesforce-Objekte. Die Daten müssen aus der „js“-Datei stammen und diese in der for:each-Vorlage verwenden. Stellen Sie sicher, dass Sie zuerst die Apex-Klasse bereitstellen müssen, während Sie die letzten Beispielkomponenten bereitstellen.