Untuk setiap
Di LWC, for:each adalah direktif yang digunakan dengan tag template. Ini mengembalikan item dari data yang diberikan. Dibutuhkan dua parameter. Kita harus menentukan data di untuk:setiap={data} Dan untuk:item=”variabel” mengambil item saat ini (dari iterator) yang ditentukan dengan variabel. Itu untuk: indeks=”index_var” menyimpan indeks elemen yang menentukan indeks elemen saat ini.
Sintaksis:
Mari kita lihat cara menentukan direktif for:each di LWC (Komponen HTML). for:index bersifat opsional.
'1.0' ?>
2. Dalam semua contoh yang akan kita bahas dalam panduan ini, logika akan diberikan sebagai kode “js”. Setelah itu, kita tentukan screen shot yang menyertakan seluruh kode “js”.
Contoh 1:
Mari kita buat daftar yang menampung 10 subjek di file “firstComponent.js”. Gunakan direktif templat for:each dan ulangi daftar ini dengan iterator “sub”. Tentukan kunci sebagai iterator ini di dalam tag paragraf dan tampilkan subjeknya.
contoh pertama.html{sub}
contoh pertama.js
// Buat subject_array yang menampung 10 mata pelajaran
subyek_array = [ 'AWS' , 'Tenaga penjualan' , 'PHP' , 'Jawa' , 'Piton' , 'HTML' , 'JS' , 'Jawa' , 'Peramal' , 'C#' ];
Seluruh Kode:
Keluaran:
Tambahkan komponen ini ke halaman 'Rekam' objek apa pun (kami menambahkannya ke halaman 'Rekam' akun). Semua 10 elemen ditampilkan di UI.
Contoh 2:
Sekarang, kita membuat array objek yang merupakan “id”, program, dan mengetik dengan 10 record yang terkait dengan Subjek. Ini diulangi untuk mendapatkan program dan tipenya. Kuncinya adalah “id” dan nilai tipe ditampilkan dalam huruf tebal.
contoh kedua.html{obj.program} - {obj.type}
contoh kedua.js
// Buat array_of_objects yang menyimpan detail 10 mata pelajaran
array_of_objects = [{id: 1 ,program: 'AWS' , jenis: 'Awan' },{pengenal: 2 ,program: 'Tenaga penjualan' , jenis: 'Awan' },
{pengenal: 3 ,program: 'PHP' , jenis: 'Jaringan' },{pengenal: 4 ,program: 'Jawa' , jenis: 'Web/Data' },
{pengenal: 5 ,program: 'Piton' , jenis: 'Semua' },{pengenal: 6 ,program: 'HTML' , jenis: 'Jaringan' },
{pengenal: 7 ,program: 'JS' , jenis: 'Jaringan' },{pengenal: 8 ,program: '.BERSIH' , jenis: 'Web/Data' },
{pengenal: 9 ,program: 'Peramal' , jenis: 'Data' },{pengenal: 10 ,program: 'C#' , jenis: 'Data' }];
Seluruh Kode:
Keluaran:
Anda dapat melihat bahwa semua program ditampilkan di UI beserta jenisnya.
Contoh 3:
Buat array objek bersarang (id, program, tipe, dan topik). Di sini, topik akan kembali berisi daftar elemen. Pada direktif for:each template yang pertama, kita mengulangi seluruh array yang disarangkan. Di dalam template ini, kami mengulangi topik lagi menggunakan iterator sebelumnya. Selanjutnya kita tampilkan program, jenis, dan topik pada bagian utama untuk: setiap template.
komponen ketiga.htmlPROGRAM: {val.program} - {val.type} TOPIK: {val.Topik}
komponen ketiga.js
data = [{id: 1 ,program: 'AWS' , jenis: 'Awan' , Topik:[ 'Perkenalan' , 'Pentingnya AWC' ]},
{pengenal: 2 ,program: 'Tenaga penjualan' , jenis: 'Awan' , Topik:[ 'Admin' , 'Perkembangan' ]},
{pengenal: 3 ,program: 'PHP' , jenis: 'Jaringan' , Topik:[ 'Perkenalan' , 'PHP-MySQL' ]}];
Seluruh Kode:
Keluaran:
Semua mata pelajaran ditampilkan beserta jenis dan topiknya. Setiap mata pelajaran berisi dua topik.
Contoh 4:
Mari kita ulangi catatan yang ada di objek “Akun”. Pertama, tulis kelas Apex yang mengembalikan daftar catatan (returnAcc() – metode) yang mencakup bidang ID Akun, Nama, Industri, dan Peringkat dari objek Standar Akun. Dalam file “js”, kami memanggil metode returnAcc() dari Apex (melalui pernyataan import) di dalam connectcallback(). Ini mengembalikan akun. Terakhir, akun-akun ini ditentukan dalam arahan templat for:each untuk mendapatkan Nama Akun dan Industri.
Data Akun.apxcpublik dengan berbagi kelas AccountData {
@AuraEnabled(dapat di-cache=benar)
Daftar statis publik
Daftar
kembalikan Daftar akun;
}
}
komponen akhir.html
Akun: {account_rec.Name} Industri: {account_rec.Industry}
