@for ile Döngü
Listeleri @for ve track ifadeleriyle görüntüleyin.
@for ile Döngü, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
for ile Döngü Oluşturma
at-for bloğu, bir koleksiyondaki her öge için içeriği yineler. Eski star-ngFor yönergesinin yerini alır ve bir track ifadesi gerektirir.
Temel for Söz Dizimi
Bir at işareti, for sözcüğü, ardından item of items ve benzersiz bir anahtar adlandıran zorunlu bir track yan tümcesi yazınız.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }track Neden Zorunlu
track ifadesi, Angular'a değişiklikler boyunca her ögeyi nasıl tanımlayacağını söyler; böylece ögeleri yeniden oluşturmak yerine DOM düğümlerini yeniden kullanabilir. Bu, performansı büyük ölçüde artırır.
Kimliğe Göre İzleme
Ögelerde kararlı bir id yoksa (örneğin ilkel dizelerden oluşan bir listede), ögenin kendisini izleyebilirsiniz.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }empty Bloğu
at-empty bloğu, koleksiyonda hiç öge olmadığında oluşturulur. at-for bloğunun kapanış süslü parantezinin ardından gelir.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Bağlamsal Değişkenler
Bir at-for bloğunun içinde index, count, first, last, even ve odd gibi yararlı değişkenler kullanılabilir. Bunları let ile yakalayabilirsiniz.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }index Değişkeni
dollar-index değeri, geçerli ögenin sıfır tabanlı konumunu verir; yukarıda gösterildiği gibi genellikle bir yerel değişkene takma adla atanır.
first ve last
dollar-first ve dollar-last boole değerleri ilk ve son ögeler için true olur; stillendirme veya ayraçlar için kullanışlıdır.
even ve odd
dollar-even ve dollar-odd boole değerleri, satır stillerini dönüşümlü olarak uygulamaya yardımcı olur.
Signal Üzerinde Döngü Oluşturma
Koleksiyon bir signal'dan gelebilir; for ifadesinde onu çağırmanız yeterlidir.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Performans Avantajı
track zorunlu olduğundan yeni at-for, trackBy olmadan kullanılan star-ngFor'dan daha hızlıdır; çünkü Angular ögeleri DOM düğümleriyle nasıl eşleştireceğini her zaman bilir.
Hızlı Kontrol: Döngü
for bloğunun gereksinimi.
Özet: Döngü
Zorunlu track ifadesiyle at-for bloğunu, boş koleksiyonlar için at-empty bloğunu ve index, first, last, even ve odd gibi bağlamsal değişkenleri öğrendiniz. star-ngFor'nun yerini alır. Sıradaki konu: at-switch ile seçim yapma.
Sıkça Sorulan Sorular
“@for ile Döngü” dersi ücretsiz mi?
Evet — “@for ile Döngü” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“@for ile Döngü” dersinde ne öğreneceğim?
Listeleri @for ve track ifadeleriyle görüntüleyin. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“@for ile Döngü” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.