Untuk setiap
Dalam LWC, for:each ialah arahan yang digunakan dengan teg templat. Ia mengembalikan item daripada data yang diberikan. Ia memerlukan dua parameter. Kita perlu menentukan data dalam untuk:setiap={data} dan for:item='pembolehubah' mengambil item semasa (dari iterator) yang ditentukan dengan pembolehubah. The for:index='index_var' menyimpan indeks unsur yang menentukan indeks unsur semasa.
Sintaks:
Mari lihat cara untuk menentukan arahan untuk: setiap dalam LWC (Komponen HTML). For:index adalah pilihan.
'item_var' untuk:index= 'index_var' >
'1.0' ?>
2. Dalam semua contoh yang akan kita bincangkan dalam panduan ini, logik akan disediakan sebagai kod 'js'. Selepas itu, kami menentukan tangkapan skrin yang merangkumi keseluruhan kod 'js'.
Contoh 1:
Mari buat senarai yang memuatkan 10 subjek dalam fail 'firstComponent.js'. Gunakan arahan untuk: setiap templat dan ulangi senarai ini dengan lelaran 'sub'. Tentukan kunci sebagai lelaran ini di dalam tag perenggan dan paparkan subjek.
firstExample.html'sub' untuk:index= 'indeks' >
{sub}
firstExample.js
// Buat subjek_array yang memegang 10 mata pelajaran
tatasusunan_mata pelajaran = [ 'AWS' , 'Pasukan jualan' , 'PHP' , 'Jawa' , 'Python' , 'HTML' , 'JS' , 'Jawa' , 'Oracle' , 'C#' ];
Keseluruhan Kod:
Pengeluaran:
Tambahkan komponen ini pada halaman 'Rekod' mana-mana objek (kami menambahkannya pada halaman 'Rekod' akaun). Kesemua 10 elemen dipaparkan pada UI.
Contoh 2:
Sekarang, kami mencipta tatasusunan objek iaitu 'id', program dan taip dengan 10 rekod yang berkaitan dengan Subjek. Ini diulang untuk mendapatkan program dan jenis. Kuncinya ialah 'id' dan nilai jenis dipaparkan sebagai tebal.
secondExample.html'obj' untuk:index= 'indeks' >
{obj.program} - {obj.type}
secondExample.js
// Cipta array_of_objects yang menyimpan butiran 10 mata pelajaran
tatasusunan_objek = [{id: 1 ,program: 'AWS' , taip: 'Awan' },{ID: 2 ,program: 'Pasukan jualan' , taip: 'Awan' },
{ID: 3 ,program: 'PHP' , taip: 'Web' },{ID: 4 ,program: 'Jawa' , taip: 'Web/Data' },
{ID: 5 ,program: 'Python' , taip: 'Semua' },{ID: 6 ,program: 'HTML' , taip: 'Web' },
{ID: 7 ,program: 'JS' , taip: 'Web' },{ID: 8 ,program: '.NET' , taip: 'Web/Data' },
{ID: 9 ,program: 'Oracle' , taip: 'Data' },{ID: 10 ,program: 'C#' , taip: 'Data' }];
Keseluruhan Kod:
Pengeluaran:
Anda boleh melihat bahawa semua program dipaparkan pada UI bersama-sama dengan jenisnya.
Contoh 3:
Buat tatasusunan objek bersarang (id, program, jenis dan topik). Di sini, topik sekali lagi akan menyimpan senarai elemen. Dalam arahan pertama untuk: setiap templat, kami mengulangi keseluruhan tatasusunan bersarang. Di dalam templat ini, kami mengulangi topik sekali lagi menggunakan lelaran sebelumnya. Seterusnya, kami memaparkan program, jenis dan topik dalam utama untuk:setiap templat.
thirdComponent.html'val' untuk:index= 'indeks' >
'val1' >
PROGRAM: {val.program} - {val.type} TOPIK: {val.Topics}
thirdComponent.js
data = [{id: 1 ,program: 'AWS' , taip: 'Awan' , Topik:[ 'Pengenalan' , 'Keperluan AWC' ]},
{ID: 2 ,program: 'Pasukan jualan' , taip: 'Awan' , Topik:[ 'Pentadbir' , 'Pembangunan' ]},
{ID: 3 ,program: 'PHP' , taip: 'Web' , Topik:[ 'Pengenalan' , 'PHP-MySQL' ]}];
Keseluruhan Kod:
Pengeluaran:
Semua subjek dipaparkan dengan jenis dan topiknya. Setiap subjek memegang dua topik.
Contoh 4:
Mari kita ulangi rekod yang terdapat dalam objek 'Akaun'. Mula-mula, tulis kelas Apex yang mengembalikan senarai rekod (returnAcc() – kaedah) yang termasuk medan ID Akaun, Nama, Industri dan Penilaian daripada objek Standard Akaun. Dalam fail 'js', kami menggunakan kaedah returnAcc() daripada Apex (melalui pernyataan import) di dalam connectedcallback(). Ini mengembalikan akaun. Akhir sekali, akaun ini dinyatakan dalam arahan templat untuk: setiap untuk mendapatkan Nama Akaun dan Industri.
AccountData.apxcawam dengan kelas perkongsian AccountData {
@AuraEnabled(cacheable=true)
Senarai statik awam
List
kembalikan senarai akaun;
}
}
finalComponent.html
'account_rec' >
Akaun: {account_rec.Name} Industri: {account_rec.Industry}
finalComponent.js
import { LightningElement,track } dari 'nasib' ;
import returnAcc daripada '@salesforce/apex/AccountData.returnAcc' ;
eksport kelas lalai FinalComponent memanjangkan LightningElement {
@track akaun;
@jejak ralat;
connectedCallback(){
returnAcc()
// Kembalikan akaun
.then(hasil => {
this.accounts = hasil;
this.error = undefined;
})
.catch(error => {
ini.error = error;
this.accounts = tidak ditentukan;
});
}
}
Pengeluaran:
Hanya 10 akaun dipaparkan dengan medan Nama dan Industri.
Kesimpulan
Kami membincangkan arahan templat untuk: setiap yang digunakan untuk memulangkan item daripada data yang diberikan. Empat contoh berbeza disediakan termasuk senarai, tatasusunan objek, objek bersarang dan objek Salesforce. Data mesti datang daripada fail 'js' dan menggunakannya dalam templat untuk: setiap. Pastikan anda perlu menggunakan kelas Apex terlebih dahulu semasa menggunakan komponen contoh terakhir.