Pro každého
V LWC je for:each direktiva, která se používá se značkou šablony. Vrací položky z daných dat. Chce to dva parametry. Musíme specifikovat údaje v for:each={data} a for:item=”proměnná” vezme aktuální položku (z iterátoru), která je určena proměnnou. The for:index=”index_var” ukládá index prvku, který určuje aktuální index prvku.
Syntax:
Podívejme se, jak specifikovat direktivu for:each v LWC (HTML Component). For:index je volitelný.
'item_var' for:index= 'index_var' >
'1,0' ?>
2. Ve všech příkladech, které budeme diskutovat v této příručce, bude logika poskytnuta jako kód „js“. Poté určíme snímek obrazovky, který obsahuje celý kód „js“.
Příklad 1:
Vytvořme seznam, který obsahuje 10 předmětů v souboru „firstComponent.js“. Použijte příkaz for:each template a iterujte tento seznam pomocí „sub“ iterátoru. Určete klíč jako tento iterátor uvnitř značky odstavce a zobrazte předměty.
firstExample.html<šablona>
'sub' for:index= 'index' >
{sub}
firstExample.js
// Vytvoří pole subjects_array, které drží 10 předměty
předměty_pole = [ 'AWS' , 'Salesforce' , 'PHP' , 'Jáva' , 'Krajta' , 'HTML' , 'JS' , 'Jáva' , 'Věštec' , 'C#' ];
Celý kód:
Výstup:
Přidejte tuto komponentu na stránku „Záznam“ libovolného objektu (přidáme ji na stránku „Záznam“ účtu). Na uživatelském rozhraní se zobrazí všech 10 prvků.
Příklad 2:
Nyní vytvoříme pole objektů, které je „id“, program a typ s 10 záznamy souvisejícími s předměty. Ty se opakují, aby se získal program a typ. Klíčem je „id“ a hodnoty typu jsou zobrazeny tučně.
secondExample.html<šablona>
'obj' for:index= 'index' >
{obj.program} – {obj.type}
secondExample.js
// Vytvořte pole_objektů, které obsahuje podrobnosti 10 předměty
pole_objektů = [{id: 1 ,program: 'AWS' , typ: 'Mrak' },{id: 2 ,program: 'Salesforce' , typ: 'Mrak' },
{id: 3 ,program: 'PHP' , typ: 'web' },{id: 4 ,program: 'Jáva' , typ: 'Web/data' },
{id: 5 ,program: 'Krajta' , typ: 'Všechno' },{id: 6 ,program: 'HTML' , typ: 'web' },
{id: 7 ,program: 'JS' , typ: 'web' },{id: 8 ,program: '.SÍŤ' , typ: 'Web/data' },
{id: 9 ,program: 'Věštec' , typ: 'Data' },{id: 10 ,program: 'C#' , typ: 'Data' }];
Celý kód:
Výstup:
Můžete vidět, že všechny programy jsou zobrazeny v uživatelském rozhraní spolu s jejich typy.
Příklad 3:
Vytvořte vnořené pole objektů (id, program, typ a témata). Zde budou témata opět obsahovat seznam prvků. V první direktivě for:each template iterujeme celé vnořené pole. Uvnitř této šablony znovu iterujeme témata pomocí předchozího iterátoru. Dále zobrazíme program, typ a témata v hlavní části pro: každou šablonu.
třetí Komponenta.html<šablona>
'val' for:index= 'index' >
'val1' >
PROGRAM: {val.program} - {val.type} TÉMATA: {val.Topics}
thirdComponent.js
data = [{id: 1 ,program: 'AWS' , typ: 'Mrak' , Témata:[ 'Úvod' , 'Základy AWC' ]},
{id: 2 ,program: 'Salesforce' , typ: 'Mrak' , Témata:[ 'administrátor' , 'Rozvoj' ]},
{id: 3 ,program: 'PHP' , typ: 'web' , Témata:[ 'Úvod' , 'PHP-MySQL' ]}];
Celý kód:
Výstup:
Všechny předměty jsou zobrazeny s jejich typem a tématy. Každý předmět má dvě témata.
Příklad 4:
Pojďme iterovat záznamy, které jsou přítomné v objektu „Účet“. Nejprve napište třídu Apex, která vrátí seznam záznamů (metoda returnAcc() –), které obsahují pole Account ID, Name, Industry a Rating z objektu Account Standard. V souboru „js“ vyvoláme metodu returnAcc() z Apexu (prostřednictvím příkazu import) uvnitř connectedcallback(). Tím se vrátí účty. Nakonec jsou tyto účty specifikovány v direktivě for:each šablony pro získání názvu účtu a odvětví.
AccountData.apxcpublic with sharing class AccountData {
@AuraEnabled(cacheable=true)
public static List
List
vrátit seznam účtů;
}
}
finalComponent.html
<šablona>
'account_rec' >
Účet: {account_rec.Name} Obor: {account_rec.Industry}
finalComponent.js
import { LightningElement,track } z 'štěstí' ;
importovat returnAcc z '@salesforce/apex/AccountData.returnAcc' ;
exportovat výchozí třídu FinalComponent extends LightningElement {
@track účty;
@chyba stopy;
connectCallback(){
returnAcc()
// Vraťte účty
.then(výsledek => {
this.accounts = výsledek;
this.error = nedefinováno;
})
.catch(error => {
this.error = chyba;
this.accounts = nedefinováno;
});
}
}
Výstup:
S poli Název a Odvětví se zobrazí pouze 10 účtů.
Závěr
Probrali jsme direktivu for:each template, která slouží k vrácení položek z daných dat. K dispozici jsou čtyři různé příklady, které zahrnují seznam, pole objektů, vnořené objekty a objekty Salesforce. Data musí pocházet ze souboru „js“ a použít je v šabloně for:each. Ujistěte se, že musíte nejprve nasadit třídu Apex, zatímco nasazujete poslední ukázkové komponenty.