Her biri için
LWC'de for:each, şablon etiketiyle birlikte kullanılan bir yönergedir. Verilen verilerden öğeleri döndürür. İki parametre alır. Verileri belirtmemiz gerekiyor for:her={veri} Ve for:item=”değişken” bir değişkenle belirtilen geçerli öğeyi (yineleyiciden) alır. for:index=”index_var” geçerli öğe dizinini belirten öğe dizinini saklar.
Sözdizimi:
LWC'de (HTML Bileşeni) for:each yönergesinin nasıl belirtileceğini görelim. for:index isteğe bağlıdır.
'item_var' için:dizin= 'index_where' >
'1.0' ?>
2. Bu kılavuzda ele alacağımız tüm örneklerde mantık “js” kodu olarak sağlanacaktır. Daha sonra “js” kodunun tamamını içeren ekran görüntüsünü belirliyoruz.
Örnek 1:
“FirstComponent.js” dosyasında 10 konunun yer aldığı bir liste oluşturalım. for:each şablon yönergesini kullanın ve bu listeyi 'sub' yineleyiciyle yineleyin. Anahtarı paragraf etiketi içinde bu yineleyici olarak belirtin ve konuları görüntüleyin.
ilkÖrnek.html<şablon>
'alt' için:dizin= 'dizin' >
{sub
ilkÖrnek.js
// tutan konu_dizisini oluşturun 10 konular
konular_dizisi = [ 'AWS' , 'Satış ekibi' , 'PHP' , 'Java' , 'Python' , 'HTML' , 'JS' , 'Java' , 'Kahin' , 'C#' ];
Kodun Tamamı:
Çıktı:
Bu bileşeni herhangi bir nesnenin 'Kayıt' sayfasına ekleyin (bunu hesabın 'Kayıt' sayfasına ekliyoruz). 10 öğenin tümü kullanıcı arayüzünde görüntülenir.
Örnek 2:
Şimdi, Konulara ilişkin 10 kayıttan oluşan “id”, program ve tür nesnelerinden oluşan bir dizi oluşturuyoruz. Bunlar programı ve türü almak için yinelenir. Anahtar “id”dir ve tür değerleri kalın olarak görüntülenir.
ikinciÖrnek.html<şablon>
'nesne' için:dizin= 'dizin' >
{obj.program} - {obj.type
ikinciÖrnek.js
// Ayrıntılarını tutan array_of_objects'i oluşturun 10 konular
array_of_objects = [{id: 1 ,program: 'AWS' , tip: 'Bulut' },{İD: 2 ,program: 'Satış ekibi' , tip: 'Bulut' },
{İD: 3 ,program: 'PHP' , tip: 'Ağ' },{İD: 4 ,program: 'Java' , tip: 'Web/Veri' },
{İD: 5 ,program: 'Python' , tip: 'Tüm' },{İD: 6 ,program: 'HTML' , tip: 'Ağ' },
{İD: 7 ,program: 'JS' , tip: 'Ağ' },{İD: 8 ,program: '.AÇIK' , tip: 'Web/Veri' },
{İD: 9 ,program: 'Kahin' , tip: 'Veri' },{İD: 10 ,program: 'C#' , tip: 'Veri' }];
Kodun Tamamı:
Çıktı:
Tüm programların türleriyle birlikte kullanıcı arayüzünde görüntülendiğini görebilirsiniz.
Örnek 3:
İç içe geçmiş bir nesne dizisi (kimlik, program, tür ve konular) oluşturun. Burada konular yine öğelerin bir listesini içerecektir. İlk for:each şablon yönergesinde, iç içe geçmiş dizinin tamamını yineliyoruz. Bu şablonun içinde, önceki yineleyiciyi kullanarak konuları tekrar yineliyoruz. Daha sonra programı, türü ve konuları ana for:her şablonda görüntülüyoruz.
üçüncüBileşen.html<şablon>
'val' için:dizin= 'dizin' >
'val1' >
PROGRAM: {val.program} - {val.type} KONULAR: {val.Topics
üçüncüComponent.js
veri = [{id: 1 ,program: 'AWS' , tip: 'Bulut' , Konular:[ 'Giriiş' , 'AWC'nin temelleri' ]},
{İD: 2 ,program: 'Satış ekibi' , tip: 'Bulut' , Konular:[ 'Yönetici' , 'Gelişim' ]},
{İD: 3 ,program: 'PHP' , tip: 'Ağ' , Konular:[ 'Giriiş' , 'PHP-MySQL' ]}];
Kodun Tamamı:
Çıktı:
Tüm konular türü ve konularıyla birlikte görüntülenir. Her konu iki konuyu barındırır.
Örnek 4:
“Hesap” nesnesinde bulunan kayıtları yineleyelim. İlk olarak, Hesap Standardı nesnesinden Hesap Kimliği, Ad, Sektör ve Derecelendirme alanlarını içeren kayıtların listesini (returnAcc() – yöntem) döndüren bir Apex sınıfı yazın. “Js” dosyasında, Connectedcallback() içindeki Apex'ten (import ifadesi aracılığıyla) returnAcc() yöntemini çağırıyoruz. Bu hesapları döndürür. Son olarak, Hesap Adını ve Sektörünü almak için bu hesaplar for:each şablon yönergesinde belirtilir.
AccountData.apxcAccountData { sınıfını paylaşarak herkese açık
@AuraEnabled(önbelleklenebilir=doğru)
genel statik Liste
List
hesap Listesini döndür;
}
}
finalComponent.html
<şablon>
'hesap_rec' >
Hesap: {account_rec.Name} Sektör: {account_rec.Industry
finalComponent.js
{ LightningElement,track }'i şuradan içe aktar: 'şans' ;
returnAcc'ı şuradan içe aktar: '@salesforce/apex/AccountData.returnAcc' ;
varsayılan sınıfı dışa aktar FinalComponent LightningElement'i genişletir {
@takip hesapları;
@takip hatası;
bağlantılıGeri Arama(){
returnAcc()
// Hesapları döndür
.then(sonuç => {
this.hesaplar = sonuç;
this.hata = tanımsız;
})
.catch(hata => {
this.hata = hata;
this.hesaplar = tanımsız;
});
}
}
Çıktı:
Ad ve Sektör alanlarıyla yalnızca 10 hesap görüntülenir.
Çözüm
Verilen verilerden öğeleri döndürmek için kullanılan for:each şablon yönergesini tartıştık. Listeyi, nesne dizisini, iç içe geçmiş nesneleri ve Salesforce nesnelerini içeren dört farklı örnek sağlanmıştır. Verilerin 'js' dosyasından gelmesi ve bunu for:each şablonunda kullanması gerekir. Son örnek bileşenleri dağıtırken ilk olarak Apex sınıfını dağıtmanız gerektiğinden emin olun.