Masalah utama yang terkait dengan penggunaan direktif ngFor dengan indeks adalah bahwa hal itu dapat menyebabkan hasil yang tidak diharapkan saat data diiterasi melalui perubahan. Ini karena indeks tidak diperbarui secara otomatis ketika item ditambahkan atau dihapus dari array, jadi jika item baru ditambahkan pada indeks 0, indeks semua item lainnya akan digeser satu per satu. Hal ini dapat menyebabkan data yang salah ditampilkan di tampilan Anda atau perilaku yang tidak diharapkan di aplikasi Anda.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. Baris kode ini membuat daftar tidak terurut.
2. Direktif *ngFor digunakan untuk mengulang array item dan menampilkan setiap item dalam daftar.
3. Kata kunci let digunakan untuk mendeklarasikan variabel yang disebut "item" yang menyimpan item saat ini dalam iterasi loop.
4. Let kata kunci juga digunakan untuk mendeklarasikan variabel yang disebut "i" yang menyimpan indeks item saat ini dalam iterasi loop.
5. Baris ini menampilkan setiap item dalam daftar dengan nomor indeksnya (dimulai dari 0).
Apa itu Sudut
Angular adalah kerangka kerja aplikasi web front-end open-source berbasis JavaScript yang terutama dikelola oleh Google dan oleh komunitas individu dan perusahaan untuk mengatasi banyak tantangan yang dihadapi dalam mengembangkan aplikasi satu halaman. Komponen JavaScript melengkapi Apache Cordova, kerangka kerja yang digunakan untuk mengembangkan aplikasi seluler lintas platform. Ini bertujuan untuk menyederhanakan pengembangan dan pengujian aplikasi semacam itu dengan menyediakan kerangka kerja untuk arsitektur model-view-controller (MVC) sisi klien dan model-view-viewmodel (MVVM), bersama dengan komponen yang biasa digunakan dalam aplikasi Internet yang kaya.
elemen ngFor
NgFor adalah direktif struktural Angular yang memungkinkan kita untuk mengulang melalui data dan membuat template untuk setiap item dalam array atau objek. Ini digunakan untuk mengulang elemen HTML tertentu beberapa kali. NgFor dapat digunakan untuk menampilkan data dari array, objek, atau string. Itu juga dapat digunakan untuk menghasilkan elemen HTML berdasarkan nilai array atau objek. NgFor biasanya digunakan dalam kombinasi dengan arahan Angular lainnya seperti ngIf dan ngSwitch.
Cara mendapatkan indeks elemen ngFor
Anda dapat menggunakan kata kunci indeks untuk mendapatkan indeks elemen dalam loop ngFor. Sintaks untuk ini adalah sebagai berikut:
Dalam contoh ini, variabel "i" akan berisi indeks loop saat ini. Anda kemudian dapat menggunakan variabel ini untuk mengakses atau memodifikasi elemen dalam daftar Anda.
