Perulangan dengan @for
Render daftar dengan @for dan ekspresi track.
Perulangan dengan @for adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Pengulangan dengan for
Blok at-for mengulangi konten untuk setiap item dalam koleksi. Blok ini menggantikan direktif lama star-ngFor dan memerlukan expression track.
Sintaks Dasar for
Tulis simbol at, kata for, lalu item of items, serta klausa track yang wajib dan menyebutkan kunci unik.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Mengapa track Wajib Digunakan
Expression track memberi tahu Angular cara mengidentifikasi setiap item saat terjadi perubahan, sehingga Angular dapat menggunakan kembali node DOM dan tidak membuatnya ulang. Hal ini sangat meningkatkan performa.
Melacak Berdasarkan Identitas
Jika item tidak memiliki id yang stabil (misalnya daftar string primitif), Anda dapat melacak berdasarkan item itu sendiri.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }Blok empty
Blok at-empty dirender ketika koleksi tidak memiliki item. Blok ini mengikuti kurung kurawal penutup blok at-for.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Variabel Kontekstual
Di dalam blok at-for, tersedia variabel yang membantu, termasuk index, count, first, last, even, dan odd. Tangkap variabel tersebut dengan let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }Variabel index
Nilai dollar-index memberikan posisi item saat ini yang dimulai dari nol, dan sering diberi alias ke variabel lokal seperti yang ditunjukkan di atas.
first dan last
Boolean dollar-first dan dollar-last bernilai true untuk item pertama dan terakhir, sehingga berguna untuk penataan gaya atau pemisah.
even dan odd
Boolean dollar-even dan dollar-odd membantu menerapkan gaya baris yang berselang-seling.
Mengulang Signal
Koleksi dapat berasal dari signal; cukup panggil signal tersebut dalam expression for.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Manfaat Performa
Karena track wajib digunakan, at-for baru lebih cepat daripada star-ngFor tanpa trackBy, sebab Angular selalu mengetahui cara mencocokkan item dengan node DOM.
Pemeriksaan Cepat: Pengulangan
Persyaratan blok for.
Ringkasan: Pengulangan
Anda telah mempelajari blok at-for dengan expression track yang wajib, blok at-empty untuk koleksi kosong, dan variabel kontekstual seperti index, first, last, even, serta odd. Blok ini menggantikan star-ngFor. Berikutnya: pergantian dengan at-switch.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Perulangan dengan @for” gratis?
Ya — teks lengkap “Perulangan dengan @for” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Perulangan dengan @for”?
Render daftar dengan @for dan ekspresi track. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Perulangan dengan @for” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Rendering Kondisional dengan @if
- Perulangan dengan @for
- Pemilihan dengan @switch
- Pemuatan Tertunda dengan @defer