NgFor Angular Yönergesi Nasıl Kullanılır

Angular, web sitenizdeki belirli HTML öğelerini dinamik olarak oluşturmak için yönergeler kullanır. Kullanabileceğiniz yapısal yönergelerden biri ngFor'dur.

ngFor yönergesi, aynı bloğu belirli sayıda tekrarlamanıza veya ayrıntılarını görüntülemek için bir dizi nesne arasında döngü yapmanıza izin verir. Diğer nesnelerin içindeki nesneleri oluşturmak için bile kullanabileceğiniz güçlü bir araçtır.

Ayrıca belirli senaryolarda faydalı olabilecek birçok işlevi vardır. Bu, ilk ve son öğeleri bulmayı veya belirli öğeleri atlamayı içerir.

Statik Sayılarda Döngü Yapmak İçin ngFor Nasıl Kullanılır

ngFor yönergesi for döngüsüne dayanmaktadır, bunlardan biri JavaScript'in desteklediği birçok faydalı döngü. Angular'ın (14) şu anki sürümünden itibaren, döngüye sokmak istediğiniz sayıda öğeye sahip bir dizi oluşturmanız gerekecek.

1. ngFor ifadesinin kendisinde bir liste oluşturabilirsiniz. Aşağıdaki kod, 0 ila 4 dizinlerini kullanarak bir paragrafı beş kez tekrarlayacaktır:

   <div *ngFor='[0, 1, 2, 3, 4] maddesine izin verin; i = indeks'>
   <p> Bu tekrarlanan bir paragraftır: {{item}} </p>
   </div>

2. Yukarıdaki yöntem büyük diziler için uygun olmayabileceğinden, TypeScript dosyasında dinamik olarak bir dizi de oluşturabilirsiniz:

   ihracat sınıfÖrnekSınıfuygularOnInit{
    sayılar: dizi<sayı> = [];
   kurucu() {
   // Bu, aşağıdaki diziyi dinamik olarak yaratacaktır:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   Bu.numbers = Dizi(10).doldurmak(1).map((x, i)=>i);
    }
   }

3. Daha sonra HTML'deki sayılar dizisinde dolaşabilirsiniz:

   <div *ngFor='sayıların maddesine izin verin; i = indeks'>
   <p>Bu tekrarlanan bir paragraftır: {{item}}</p>
   </div>

Belirli Sayılar Nasıl Atlanır veya Stil Atlanır

kullanabilirsiniz garip veya Bile Her ikinci sayıyı belirlemek için değişkenler için. Bunu yararlı bulabileceğiniz bir senaryo, bir tablodaki her tek veya çift satırı farklı bir renk kullanarak biçimlendirmek istemenizdir.

1. Bir bileşenin CSS dosyasına bazı yeni CSS sınıfları ekleyin. Çift veya tek dizinlerdeki belirli öğeler için kullanacağınız stiller şunlardır:

   .kırmızı {
    kırmızı renk;
   }
   .mavi { 
    renk: mavi; 
   }
   

2. ngFor deyiminde tek ve çift değişkenleri bildirin. Bunlar, Angular'ın tanıyacağı değişkenlerdir. Kırmızı CSS sınıfını çift sayılara ve mavi CSS sınıfını tek sayılara atayın:

   <div *ngFor='sayıların maddesine izin verin; tek = tek olsun; izin ver bile = hatta' [ngClass]="{kırmızı: çift, mavi: tek}">
   <p> Bu tekrarlanan bir paragraftır: {{item}} </p>
   </div>

3. kullanarak Angular web sitenizi çalıştırın hizmet etmek ve web tarayıcısında açın. Çift ve tek HTML öğeleri, CSS sınıflarına göre farklı stiller arasında değişir:
4. Her çift sayıyı tamamen atlamak istiyorsanız, ngIf yönergesini kullanabilirsiniz. Bu, tüm tek sayıları atlayacak ve yalnızca çift olan sayıları görüntüleyecektir:

   <div *ngFor='sayıların maddesine izin verin; izin ver bile = hatta'>
   <p *ngIf='Bile'> Bu tekrarlanan bir paragraftır: {{item}} </p>
   </div>

Geriye Doğru Nasıl Sayılır

Geriye doğru saymak için, bir listeyi tersine çevirme veya bir dizin kullanarak döngü boyunca geriye doğru sayma gibi geleneksel yöntemleri kullanabilirsiniz.

1. ngFor deyiminde bir dizin değişkeni bildirin. ngFor içinde, dizinin uzunluğundan başlayın ve daha önce döngüye aldığınız öğelerin sayısını çıkarın:

   <div *ngFor="sayıların maddesine izin verin; i = dizin;">
   <p> Bu tekrarlanan bir paragraftır: {{numbers.length-i-1}} </p>
   </div>

2. TypeScript dosyasında ters çevrilmiş bir liste de oluşturabilirsiniz:

   ihracat sınıfÖrnekSınıfuygularOnInit{
    sayılar: dizi<sayı> = [];
    tersine çevrilmişListe: Dizi<sayı> = [];
   kurucu() {
   Bu.numbers = Dizi(10).doldurmak(1).map((x, i)=>i);
   Bu.reversedList = Bu.numbers.slice().reverse();
    }
   }

3. ngFor kullanarak ters çevrilmiş liste üzerinde yineleyin:

   <div *ngFor='reversedList öğesinin izin ver; i = indeks'>
   <p> Bu tekrarlanan bir paragraftır: {{item}} </p>
   </div>

İlk ve Son Eleman Nasıl Farklı Şekilde Stillendirilir

İlk ve son öğeleri, diğer öğelerden ayrı ayrı stillendirebilirsiniz. ilk ve geçen Açısal değişkenler. Bu bir alternatif CSS psuedo sınıflarını kullanma beğenmek :ilk çocuk.

1. ngFor deyiminde, ilk ve son değişkenleri bildirin. Önceki adımlarda mavi ve kırmızı CSS sınıflarını atamak için ngClass yönergesini kullanın. İlk öğeye mavi CSS sınıfını ve son öğeye kırmızı CSS sınıfını atayın:

   <div *ngFor='sayıların maddesine izin verin; ilk önce = önce; hadi son = son' [ngClass]= "{mavi: ilk, kırmızı: son}">
   <p> Bu tekrarlanan bir paragraftır: {{item}} </p>
   </div>

Nesneler Üzerinde Yineleme Yapmak İçin ngFor Nasıl Kullanılır

Nesneler arasında dolaşmak ve bireysel değişkenlerine erişmek için ngFor yönergesini kullanabilirsiniz.

1. TypeScript dosyasında nesnelerin bir listesini oluşturun. Bu durumda, ayrıntılarıyla birlikte bir kişi listesi olacaktır:

   ihracat sınıfÖrnekSınıfuygularOnInit{
    insanlar = []; 
   kurucu() {
   Bu.insanlar = [
    { ilk adı: 'John', Soyadı: 'Smith', Meslek: 'İK Yöneticisi', başlangıçTarihi: yeni Tarih("2019-02-05") },
    { ilk adı: 'Mary', Soyadı: 'Johnson', Meslek: 'Teknik görevli', başlangıçTarihi: yeni Tarih("2016-01-07") },
    { ilk adı: 'William', Soyadı: 'Kahverengi', Meslek: 'İnsan kaynakları memuru', başlangıçTarihi: yeni Tarih("2018-03-03") },
    ];
    }
   }

2. HTML'de, kişi listesinde dolaşmak için ngFor döngüsünü kullanın. kullanarak her kişiye erişilebilir olacaktır. kişi değişken. Her kişinin özelliklerine erişmek için kişi değişkenini kullanabilirsiniz:

   <div *ngFor='insan insanı olsun; i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{kişi.işgal}} </p>
   <p> {{person.startDate}} </p>
   </div>

Diğer Nesnelerin İçindeki Nesneleri Görüntülemek İçin Yuvalanmış ngFor Nasıl Kullanılır

Nesneleri diğer nesnelerin içinde görüntülemek için iç içe bir for döngüsü kullanabilirsiniz.

1. Kişi listesini değiştirin. Her kişinin bir acil durum irtibat listesi olacaktır. Her acil durum kişisini ayrı bir nesne olarak saklayın:

   Bu.insanlar = [
    {
    ilk adı: 'John',
    Soyadı: 'Smith',
    acilKişiler: [
    { isim: 'Amanda Smith', ilişki: 'Kadın eş', telefon: '0441239876' },
    { isim: 'Barry Smith', ilişki: 'Oğul', telefon: '0442239876'}
    ]
    },
    {
    ilk adı: 'Mary',
    Soyadı: 'Johnson',
    acilKişiler: [
    { isim: 'Mark Johnson', ilişki: 'Erkek eş', telefon: '0443239876' }
    ]
    },
    ];

2. HTML'de, her bir acil durum kişisi arasında dolaşmak ve ayrıntılarını görüntülemek için orijinal döngünüzün içinde yuvalanmış bir döngü oluşturun:

   <div *ngFor='insan insanı olsun; i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='person.emergencyContacts'ın iletişim kurmasına izin verin; j = dizin'>
   <h5> Acil Durum Kişileri: </h5>
   <p> {{kişi.name}} </p>
   <p> {{person.relationship}} </p>
   <p> {{kişi.telefon}} </p>
   </div>
   <br>
   </div>

Angular'da ngFor Kullanarak Döngü Yapma

Web sitenizdeki HTML öğeleri arasında dinamik olarak geçiş yapmak için ngFor yapısal yönergesini kullanabilirsiniz. Bu, aynı bloğu birkaç nesne için veya belirli sayıda tekrarlamanıza izin verecektir.

Her çift veya tek sayıyı atlamak veya ilk ve son öğeyi biçimlendirmek gibi diğer hileleri yapmak için de kullanabilirsiniz. Diğer nesneler içinde birçok nesneyi dinamik olarak oluşturmak için de kullanabilirsiniz.

Web sitenizi daha dinamik hale getirmek için kullanabileceğiniz başka Angular yönergeleri de vardır. Bunlara ngIf, ngSwitch, ngStyle, ngClass ve ngModel dahildir.