Dla każdego
W LWC for:each jest dyrektywą używaną ze znacznikiem szablonu. Zwraca elementy z podanych danych. Przyjmuje dwa parametry. Musimy podać dane w pliku dla:każdy={dane} I for:item=”zmienna” pobiera bieżący element (z iteratora) określony za pomocą zmiennej. The for:index=”index_var” przechowuje indeks elementu, który określa bieżący indeks elementu.
Składnia:
Zobaczmy, jak określić dyrektywę for:each w LWC (komponent HTML). Opcja for:index jest opcjonalna.
„1,0” ?>
2. We wszystkich przykładach, które omówimy w tym przewodniku, logika będzie dostarczana w postaci kodu „js”. Następnie podajemy zrzut ekranu zawierający cały kod „js”.
Przykład 1:
Stwórzmy listę zawierającą 10 tematów w pliku „firstComponent.js”. Użyj dyrektywy for:each template i iteruj tę listę za pomocą iteratora „sub”. Określ klucz jako iterator wewnątrz znacznika akapitu i wyświetl tematy.
pierwszyPrzykład.html<środek>
'pod' dla:indeks= 'indeks' >
{sub
pierwszyPrzykład.js
// Utwórz tablicę items_array, która zawiera 10 tematy
tematy_tablica = [ „AWS” , 'Siły sprzedaży' , „PHP” , 'Jawa' , 'Pyton' , „HTML” , „JS” , 'Jawa' , 'Wyrocznia' , 'C#' ];
Cały kod:
Wyjście:
Dodaj ten komponent do strony „Rekord” dowolnego obiektu (dodajemy go do strony „Rekord” konta). Wszystkie 10 elementów jest wyświetlanych w interfejsie użytkownika.
Przykład 2:
Teraz tworzymy tablicę obiektów czyli „id”, program i wpisujemy 10 rekordów powiązanych z Tematami. Są one powtarzane w celu uzyskania programu i typu. Kluczem jest „id”, a wartości typu są wyświetlane pogrubioną czcionką.
drugiPrzykład.html<środek>
„obiekt” dla:indeks= 'indeks' >
{obj.program} - {obj.type
drugiPrzykład.js
// Utwórz tablicę_obiektów zawierającą szczegóły 10 tematy
array_of_objects = [{id: 1 ,program: „AWS” , typ: 'Chmura' },{ID: 2 ,program: 'Siły sprzedaży' , typ: 'Chmura' },
{ID: 3 ,program: „PHP” , typ: 'Sieć' },{ID: 4 ,program: 'Jawa' , typ: „Sieć/dane” },
{ID: 5 ,program: 'Pyton' , typ: 'Wszystko' },{ID: 6 ,program: „HTML” , typ: 'Sieć' },
{ID: 7 ,program: „JS” , typ: 'Sieć' },{ID: 8 ,program: '.INTERNET' , typ: „Sieć/dane” },
{ID: 9 ,program: 'Wyrocznia' , typ: 'Dane' },{ID: 10 ,program: 'C#' , typ: 'Dane' }];
Cały kod:
Wyjście:
Możesz zobaczyć, że wszystkie programy są wyświetlane w interfejsie użytkownika wraz z ich typami.
Przykład 3:
Utwórz zagnieżdżoną tablicę obiektów (identyfikator, program, typ i tematy). Tutaj tematy ponownie będą zawierać listę elementów. W pierwszej dyrektywie for:each template iterujemy całą zagnieżdżoną tablicę. Wewnątrz tego szablonu ponownie iterujemy tematy, korzystając z poprzedniego iteratora. Następnie wyświetlamy program, typ i tematy w głównym szablonie for:each.
trzeciKomponent.html<środek>
„wartość1” >
PROGRAM: {val.program} - {val.type} TEMATY: {val.Topics
trzeciKomponent.js
dane = [{id: 1 ,program: „AWS” , typ: 'Chmura' , Tematy:[ 'Wstęp' , „Podstawy AWC” ]},
{ID: 2 ,program: 'Siły sprzedaży' , typ: 'Chmura' , Tematy:[ 'Admin' , 'Rozwój' ]},
{ID: 3 ,program: „PHP” , typ: 'Sieć' , Tematy:[ 'Wstęp' , „PHP-MySQL” ]}];
Cały kod:
Wyjście:
Wyświetlane są wszystkie tematy wraz z ich rodzajem i tematyką. Każdy przedmiot obejmuje dwa tematy.
Przykład 4:
Zróbmy iterację rekordów znajdujących się w obiekcie „Konto”. Najpierw napisz klasę Apex, która zwraca listę rekordów (returnAcc() – metoda), która zawiera pola Identyfikator konta, Nazwa, Branża i Ocena z obiektu Account Standard. W pliku „js” wywołujemy metodę returnAcc() z Apex (poprzez instrukcję import) wewnątrz funkcji connectcallback(). Spowoduje to zwrócenie kont. Na koniec te konta są określone w dyrektywie for:each template, aby uzyskać nazwę konta i branżę.
Dane konta.apxcpublic z klasą udostępniania AccountData {
@AuraEnabled (cacheable = true)
public static List
List
zwróć listę kont;
}
}
finalComponent.html
Konto: {account_rec.Name} Branża: {account_rec.Industry
