Cara Menggunakan Arahan Sudut ngFor

Angular menggunakan arahan untuk secara dinamis merender elemen HTML tertentu di situs web Anda. Salah satu arahan struktural yang dapat Anda gunakan adalah ngFor.

Direktif ngFor memungkinkan Anda untuk mengulang blok yang sama beberapa kali, atau mengulang array objek untuk menampilkan detailnya. Ini adalah alat yang ampuh yang bahkan dapat Anda gunakan untuk merender objek di dalam objek lain.

Ini juga memiliki banyak fungsi yang dapat berguna dalam skenario tertentu. Ini termasuk menemukan elemen pertama dan terakhir atau melewatkan item tertentu.

Cara Menggunakan ngFor untuk Mengulangi Angka Statis

Direktif ngFor didasarkan pada for loop, salah satu dari banyak loop berguna yang didukung JavaScript. Pada versi Angular (14) saat ini, Anda perlu membuat larik yang memiliki jumlah item yang ingin Anda ulangi.

1. Anda dapat membuat daftar di dalam pernyataan ngFor itu sendiri. Kode berikut akan mengulangi paragraf lima kali, menggunakan indeks 0 hingga 4:

   <div *ngFor='biarkan item [0, 1, 2, 3, 4]; misalkan i = indeks'>
   <p> Ini adalah paragraf yang diulang: {{item}} </p>
   </div>

2. Karena metode di atas mungkin tidak cocok untuk array besar, Anda juga dapat membuat array secara dinamis di file TypeScript:

   ekspor kelasKelas ContohmengimplementasikanOnInit{
    nomor: Array<nomor> = [];
   konstruktor() {
   // Ini akan secara dinamis membuat array berikut:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   ini.angka = Himpunan(10).mengisi(1).peta((x, i)=>i);
    }
   }

3. Anda kemudian dapat mengulang melalui array angka dalam HTML:

   <div *ngFor='biarkan item nomor; misalkan i = indeks'>
   <p>Ini adalah paragraf yang diulang: {{item}}</p>
   </div>

Cara Melewati atau Mengatur Angka Tertentu

Anda dapat menggunakan aneh atau bahkan ngFor variabel untuk menentukan setiap angka kedua. Skenario di mana Anda mungkin menemukan ini berguna adalah jika Anda ingin menata setiap baris ganjil atau genap dalam tabel menggunakan warna yang berbeda.

1. Dalam file CSS untuk sebuah komponen, tambahkan beberapa kelas CSS baru. Ini adalah gaya yang akan Anda gunakan untuk elemen tertentu pada indeks genap atau ganjil:

   .merah {
    warna merah;
   }
   .biru { 
    warna biru; 
   }
   

2. Deklarasikan variabel ganjil dan genap dalam pernyataan ngFor. Ini adalah variabel yang akan dikenali oleh Angular. Tetapkan kelas CSS merah ke angka genap dan kelas CSS biru ke angka ganjil:

   <div *ngFor='biarkan item nomor; biarkan ganjil = ganjil; biarkan genap = genap' [ngKelas]="{merah: genap, biru: ganjil}">
   <p> Ini adalah paragraf yang diulang: {{item}} </p>
   </div>

3. Jalankan situs web Angular Anda menggunakan ng melayani dan buka di browser web. Elemen HTML genap dan ganjil akan bergantian antara gaya yang berbeda berdasarkan kelas CSS mereka:
4. Jika Anda ingin melewatkan setiap bilangan genap sepenuhnya, Anda dapat menggunakan direktif ngIf. Ini akan melewatkan semua angka ganjil dan hanya menampilkan angka genap:

   <div *ngFor='biarkan item nomor; biarkan genap = genap'>
   <p *ngJika='bahkan'> Ini adalah paragraf yang diulang: {{item}} </p>
   </div>

Cara Menghitung Mundur

Untuk menghitung mundur, Anda dapat menggunakan metode tradisional seperti membalik daftar atau menghitung mundur melalui loop menggunakan indeks.

1. Deklarasikan variabel indeks dalam pernyataan ngFor. Di dalam ngFor, mulai dari panjang array dan kurangi jumlah item yang telah Anda ulangi:

   <div *ngFor="biarkan item nomor; misalkan i = indeks;">
   <p> Ini adalah paragraf yang diulang: {{numbers.length-i-1}} </p>
   </div>

2. Anda juga dapat membuat daftar terbalik di file TypeScript:

   ekspor kelasKelas ContohmengimplementasikanOnInit{
    nomor: Array<nomor> = [];
    daftar terbalik: Array<nomor> = [];
   konstruktor() {
   ini.angka = Himpunan(10).mengisi(1).peta((x, i)=>i);
   ini.reversedList = ini.numbers.slice().reverse();
    }
   }

3. Ulangi daftar terbalik menggunakan ngFor:

   <div *ngFor='biarkan item dari reversedList; misalkan i = indeks'>
   <p> Ini adalah paragraf yang diulang: {{item}} </p>
   </div>

Cara Menata Elemen Pertama dan Terakhir Secara Berbeda

Anda dapat menata elemen pertama dan terakhir secara terpisah dari elemen lain menggunakan pertama dan terakhir Variabel sudut. Ini adalah alternatif untuk menggunakan kelas psuedo CSS Suka :anak pertama.

1. Dalam pernyataan ngFor, deklarasikan variabel pertama dan terakhir. Gunakan direktif ngClass untuk menetapkan kelas CSS biru dan merah di langkah sebelumnya. Tetapkan kelas CSS biru ke elemen pertama, dan kelas CSS merah ke elemen terakhir:

   <div *ngFor='biarkan item nomor; biarkan dulu = dulu; biarkan terakhir = terakhir' [ngKelas]= "{biru: pertama, merah: terakhir}">
   <p> Ini adalah paragraf yang diulang: {{item}} </p>
   </div>

Cara Menggunakan ngFor untuk Mengulangi Objek

Anda dapat menggunakan direktif ngFor untuk mengulang objek dan mengakses variabel individualnya.

1. Buat daftar objek dalam file TypeScript. Dalam hal ini, akan ada daftar orang dengan detail mereka:

   ekspor kelasKelas ContohmengimplementasikanOnInit{
    orang = []; 
   konstruktor() {
   ini.orang = [
    { nama depan: 'John', nama keluarga: 'Smith', pekerjaan: 'Manajer HR', tanggal mulai: Tanggal baru("2019-02-05") },
    { nama depan: 'Maria', nama keluarga: 'Johnson', pekerjaan: 'Petugas Teknis', tanggal mulai: Tanggal baru("2016-01-07") },
    { nama depan: 'William', nama keluarga: 'Cokelat', pekerjaan: 'petugas SDM', tanggal mulai: Tanggal baru("2018-03-03") },
    ];
    }
   }

2. Dalam HTML, gunakan loop ngFor untuk mengulang daftar orang. Setiap orang akan dapat diakses menggunakan orang variabel. Anda dapat menggunakan variabel person untuk mengakses atribut setiap orang:

   <div *ngFor='biarkan orang orang; misalkan i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{orang.pekerjaan}} </p>
   <p> {{person.startDate}} </p>
   </div>

Cara Menggunakan Nested ngFor untuk Menampilkan Objek Di Dalam Objek Lain

Anda dapat menggunakan loop for bersarang untuk menampilkan objek di dalam objek lain.

1. Ubah daftar orang. Setiap orang akan memiliki daftar kontak darurat. Simpan setiap kontak darurat sebagai objek terpisah:

   ini.orang = [
    {
    nama depan: 'John',
    nama keluarga: 'Smith',
    kontak darurat: [
    { nama: 'Amanda Smith', hubungan: 'Istri', telepon: '0441239876' },
    { nama: 'Barry Smith', hubungan: 'Putra', telepon: '0442239876'}
    ]
    },
    {
    nama depan: 'Maria',
    nama keluarga: 'Johnson',
    kontak darurat: [
    { nama: 'Mark Johnson', hubungan: 'Suami', telepon: '0443239876' }
    ]
    },
    ];

2. Di HTML, buat loop bersarang di dalam loop asli Anda untuk mengulang setiap kontak darurat, dan tampilkan detailnya:

   <div *ngFor='biarkan orang orang; misalkan i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='biarkan kontak person.emergencyContacts; misalkan j = indeks'>
   <h5> Kontak darurat: </h5>
   <p> {{nama Kontak}} </p>
   <p> {{person.relationship}} </p>
   <p> {{person.phone}} </p>
   </div>
   <br>
   </div>

Perulangan Menggunakan ngFor di Angular

Anda dapat menggunakan arahan struktural ngFor untuk secara dinamis mengulang elemen HTML di situs web Anda. Ini akan memungkinkan Anda untuk mengulang blok yang sama untuk sejumlah objek, atau untuk beberapa kali tertentu.

Anda juga dapat menggunakannya untuk melakukan trik lain seperti melewatkan setiap angka genap atau ganjil atau menata elemen pertama dan terakhir. Anda juga dapat menggunakannya untuk merender banyak objek secara dinamis di dalam objek lain.

Ada arahan Angular lain yang dapat Anda gunakan untuk membantu membuat situs web Anda lebih dinamis. Ini termasuk ngIf, ngSwitch, ngStyle, ngClass, dan ngModel.