Pengulangan dengan @for
Paparkan senarai dengan @for dan ungkapan track.
Pengulangan dengan @for ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Menggelung dengan for
Blok at-for mengulangi kandungan untuk setiap item dalam koleksi. Blok ini menggantikan arahan star-ngFor lama dan memerlukan ungkapan track.
Sintaks for Asas
Tulis simbol at, perkataan for, kemudian item of items, serta klausa track yang diperlukan untuk menamakan kunci unik.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Sebab track Diperlukan
Ungkapan track memberitahu Angular cara mengenal pasti setiap item apabila berlaku perubahan, supaya Angular boleh menggunakan semula nod DOM dan bukannya menciptanya semula. Ini meningkatkan prestasi dengan ketara.
Menjejak Mengikut Identiti
Jika item tidak mempunyai id yang stabil, contohnya senarai rentetan primitif, anda boleh menjejak berdasarkan item itu sendiri.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }Blok empty
Blok at-empty dipaparkan apabila koleksi tidak mempunyai item. Blok ini mengikuti pendakap penutup blok at-for.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Pemboleh Ubah Kontekstual
Dalam blok at-for, pemboleh ubah berguna tersedia, termasuk index, count, first, last, even dan odd. Tangkap pemboleh ubah ini dengan let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }Pemboleh Ubah index
Nilai dollar-index memberikan kedudukan berasaskan sifar bagi item semasa dan biasanya diberikan alias kepada pemboleh ubah setempat seperti yang ditunjukkan di atas.
first dan last
Nilai Boolean dollar-first dan dollar-last adalah benar untuk item pertama dan terakhir, berguna bagi penggayaan atau pemisah.
even dan odd
Nilai Boolean dollar-even dan dollar-odd membantu menghasilkan gaya baris berselang-seli.
Menggelung Merentasi Isyarat
Koleksi boleh datang daripada isyarat; panggil sahaja isyarat itu dalam ungkapan for.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Manfaat Prestasi
Oleh sebab track diwajibkan, at-for baharu lebih pantas berbanding star-ngFor tanpa trackBy, kerana Angular sentiasa mengetahui cara memadankan item dengan nod DOM.
Semakan Pantas: Gelung
Keperluan blok for.
Imbas Kembali: Gelung
Anda telah mempelajari blok at-for dengan ungkapan track yang diwajibkan, blok at-empty untuk koleksi kosong, serta pemboleh ubah kontekstual seperti index, first, last, even dan odd. Blok ini menggantikan star-ngFor. Seterusnya: pemilihan dengan at-switch.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Pengulangan dengan @for” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Pengulangan dengan @for”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pengulangan dengan @for”?
Paparkan senarai dengan @for dan ungkapan track. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Pengulangan dengan @for” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Paparan Bersyarat dengan @if
- Pengulangan dengan @for
- Pertukaran dengan @switch
- Pemuatan Tertangguh dengan @defer