Yerleşik Açısal Yönerge Nasıl Kullanılır: ngIf, ngFor, ngClass ve Daha Fazlası

Angular projenizde HTML'ye yönergeler ekleyebilirsiniz. Bazıları işaretlemenizin yapısını kontrol ederken, diğerleri niteliklere odaklanır.

Bu makale en yaygın altı Angular yönergesini inceleyecektir: ngFor, ngIf, ngClass, ngStyle, ngModel ve ngSwitch.

Açısal Yönergeler Nelerdir?

Angular yönergeleri, if ifadelerini ve for döngülerini kullanmanıza ve bir Angular projesinin HTML koduna başka davranışlar eklemenize izin verir.

Direktif	Tanım
*ngIf	Belirli HTML bloklarının yalnızca belirli bir koşulu karşıladıklarında görüntülenmesini istediğinizde ngIf'yi kullanabilirsiniz. Örneğin, bir kullanıcı belirli bir alan için girdi girdikten sonra görüntülenen açılır pencereli bir formunuz varsa.
*ngFor	Birçok kez tekrarlamak için belirli bir bloğa ihtiyacınız varsa ngFor'u kullanabilirsiniz. Örneğin, bir öğe listeniz varsa ve her öğe için bir div görüntülemeniz gerekiyorsa.
*ngSınıfı	Bu, bir sınıf kullanarak koşullu stil ekler. Bir if ifadesi koşulu karşılıyorsa, belirtilen sınıfı uygular.
*ngStyle	Bu, koşullu satır içi stil ekler. Bir if ifadesi koşulu karşılıyorsa, belirtilen stilleri uygular.
*ngModel	Bu, iki yönlü ciltleme yapmanızı sağlar. Bu, verileri HTML ve TypeScript dosyası arasında her iki yönde de iletebileceğiniz anlamına gelir. Örneğin, TypeScript dosyasındaki bir özniteliğin değerini HTML dosyasına aktarabilir veya bunun tersini yapabilirsiniz.
*ngAnahtarı	Bu, birçok değeri kontrol etmek için birçok vaka içeren bir switch ifadesi eklemenize izin verir. Vakalara bağlı olarak, belirli HTML öğeleri gösterilecektir.

Yapısal yönergeler, HTML öğelerinin yapısını içerir. Bunlar ngIf, ngFor ve ngSwitch'i içerir. Nitelik yönergeleri, HTML öğelerinin özelliklerini değiştirmeyi içerir. Bunlara ngStyle, ngClass ve ngModel dahildir.

ngIf Nasıl Kullanılır

ngIf kullanmak için, belirli bir HTML öğesinin gösterilmesi için doğru olarak değerlendirmek üzere bir koşula ihtiyacınız olacaktır.

1. TypeScript dosyanıza iki değişken ekleyin. Bu örnekte, bir noPlaylists değişkeni ve çalma listelerini depolamak için bir değişken vardır. Çalma listesi dizisinin uzunluğu 0 ise bu değişken true olarak değerlendirilir.

   noPlaylists: boolean = false;
   çalma listeleri: herhangi biri = [];
   yapıcı() { }
    ngOnInit(): geçersiz {
    if (this.playlists.length 0) {
    this.noPlaylists = true;
    }
   }
   

2. HTML'de *ngIf ifadesini ekleyin. noPlaylists true ise, aşağıdaki aralıkta yer alan hata mesajı görünecektir. Aksi takdirde olmaz. ngIf'yi farklı türlere uygulayabilirsiniz. HTML etiketleri.

   
   
   Kullanılabilir oynatma listesi yok.
   
   
   
   

3. if-ifadesine bir "else" bileşeni eklemek için, bir şablon bloğundaki "else" kısmı için HTML kodunu eklemeniz gerekecektir.

   
   
   Kullanılabilir oynatma listesi yok.
   
   
   
   
   
   
   Oynatma listeleri bulundu.
   
   
   
   

ngFor Nasıl Kullanılır

Bir sayfada belirli sayıda bloğu tekrarlamanız gerekiyorsa, ngFor yönergesini kullanabilirsiniz.

1. TypeScript dosyasında diziye öğeler ekleyin.

   çalma listeleri: herhangi biri = [
    {"isim": "Rock", "Şarkıların sayısı": 5},
    {"ad": "Çağdaş", "Şarkıların sayısı": 9},
    {"ad": "Popüler", "Şarkıların sayısı": 14},
    {"ad": "Akustik", "Şarkıların sayısı": 3},
    {"ad": "Düğün Şarkıları", "Şarkıların sayısı": 25},
    {"isim": "Metal", "Şarkı sayısı": 0},
   ];
   

2. HTML dosyasına *ngFor ifadesini ekleyin.

   Oynatma listeleri bulundu.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} şarkı
   
   
   
   
   
   
   

   ngFor içinde, "playlist" değişkenini kullanarak dizideki her nesneye başvurabileceksiniz. "playlist.name" ve "playlist.numberOfSongs", her iki özelliği de etiket.

ngClass Nasıl Kullanılır

Belirli bir div'in kullandığı stil sınıfını bir koşula göre değiştirebilirsiniz.

1. CSS dosyasına farklı stiller içeren iki sınıf ekleyin. her türlü ekleyebilirsiniz CSS stili istediğiniz gibi farklı arka plan renkleri.

   .şarkılar {
    arka plan rengi: #F7F5F2;
   }
   .noŞarkılar {
    arka plan rengi: #FFA8A8;
   }

2. Önceki adımdaki for döngüsü içinde, ngClass öznitelik yönergesini ekleyin. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" aynı şeyi kullanıyor JavaScript olan üçlü operatör ve diğer diller kullanır.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} şarkı
   
   
   
   
   

   Şarkı sayısı sıfırdan büyükse, "şarkılar" sınıfını div'e uygular. Bu, div'e gri bir arka plan rengi verecektir. Aksi takdirde şarkı sayısı sıfır ise div'e "noSongs" sınıfını uygulayacaktır. Bu, div'e kırmızı bir arka plan rengi verecektir.

ngStyle Nasıl Kullanılır

Bir sınıf aracılığıyla stil oluşturmak yerine satır içi stil uygulamak istiyorsanız ngClass kullanmak yerine ngStyle kullanabilirsiniz.

1. Bunun yerine ngStyle kullanmak için önceki adımdaki ngClass'ı değiştirin.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} şarkı
   
   
   
   

[ngStyle]="{'background-color': çalma listesi.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'renk': çalma listesi.numberOfSongs > 0? 'siyah': 'koyu mavi' }"

PaylaşmakPaylaşmakCıvıldamakPaylaşmakE-posta

İlgili konular

• Programlama
• Programlama
• JavaScript
• HTML
• CSS