Diselesaikan: html ngfor dengan index

Masalah utama yang berkaitan dengan menggunakan arahan ngFor dengan indeks ialah ia boleh membawa kepada hasil yang tidak dijangka apabila data diulangi atas perubahan. Ini kerana indeks tidak dikemas kini secara automatik apabila item ditambah atau dialih keluar daripada tatasusunan, jadi jika item baharu ditambahkan pada indeks 0, semua item lain akan menurunkan indeksnya sebanyak satu. Ini boleh menyebabkan data yang salah dipaparkan dalam paparan anda atau tingkah laku yang tidak dijangka dalam aplikasi anda.

<ul>
  <li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>

1. Baris kod ini mencipta senarai tidak tertib.
2. Arahan *ngFor digunakan untuk mengulangi tatasusunan item dan memaparkan setiap item dalam senarai.
3. Kata kunci let digunakan untuk mengisytiharkan pembolehubah yang dipanggil "item" yang memegang item semasa dalam lelaran gelung.
4. Kata kunci let juga digunakan untuk mengisytiharkan pembolehubah yang dipanggil "i" yang memegang indeks item semasa dalam lelaran gelung.
5. Baris ini memaparkan setiap item dalam senarai dengan nombor indeksnya (bermula dari 0).

Apa itu Angular

Angular ialah rangka kerja aplikasi web front-end berasaskan JavaScript yang diselenggara terutamanya oleh Google dan oleh komuniti individu dan syarikat untuk menangani banyak cabaran yang dihadapi dalam membangunkan aplikasi satu halaman. Komponen JavaScript melengkapkan Apache Cordova, rangka kerja yang digunakan untuk membangunkan apl mudah alih merentas platform. Ia bertujuan untuk memudahkan kedua-dua pembangunan dan ujian aplikasi tersebut dengan menyediakan rangka kerja untuk seni bina model-view-controller (MVC) dan model-view-viewmodel (MVVM) sisi klien, bersama-sama dengan komponen yang biasa digunakan dalam aplikasi Internet yang kaya.

ngFor elemen

NgFor ialah arahan struktur Sudut yang membolehkan kami mengulangi data dan mencipta templat untuk setiap item dalam tatasusunan atau objek. Ia digunakan untuk mengulang elemen HTML tertentu beberapa kali. NgFor boleh digunakan untuk memaparkan data daripada tatasusunan, objek atau rentetan. Ia juga boleh digunakan untuk menjana elemen HTML berdasarkan nilai tatasusunan atau objek. NgFor biasanya digunakan dalam kombinasi dengan arahan Sudut lain seperti ngIf dan ngSwitch.

Bagaimana untuk mendapatkan indeks elemen ngFor

Anda boleh menggunakan kata kunci indeks untuk mendapatkan indeks elemen dalam gelung ngFor. Sintaks untuk ini adalah seperti berikut:

{{i}} – {{item}}

Dalam contoh ini, pembolehubah "i" akan mengandungi indeks semasa gelung. Anda kemudian boleh menggunakan pembolehubah ini untuk mengakses atau mengubah suai elemen dalam senarai anda.

Related posts:

Tinggalkan komen