Angular Academy · Ders

@if ile Koşullu Görüntüleme

İçeriği @if ve @else ile koşullu olarak gösterin.

1. ders / 413 adım

@if ile Koşullu Görüntüleme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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.

Yerleşik Denetim Akışı

Modern Angular şablonları, at işaretiyle yazılan yerleşik denetim akışı bloklarını içerir. Bunlar eski yapısal yönergelerin yerini alır ve içe aktarma gerektirmez.

if Bloğu

at-if bloğu içeriği koşullu olarak oluşturur. At işaretini, if sözcüğünü, parantez içindeki koşulu ve süslü parantez içindeki içeriği yazarsınız.

// template:
// @if (loggedIn) {
//   <p>Welcome back!</p>
// }

ngIf Yerine Kullanma

Bu, eski *ngIf yapısal yönergesinin yerini alır. Yeni söz dizimi şablon dilinin parçasıdır; bu nedenle içe aktarılacak bir şey yoktur.

Koşulda Signal Okuma

Koşul, bir signal çağrısı da dahil olmak üzere herhangi bir ifade olabilir.

// @if (count() > 0) {
//   <p>You have items</p>
// }

else Bloğu

at-else bloğu, koşul yanlış olduğunda yedek içerik sağlar. if bloğunun kapanış süslü parantezinin hemen ardından gelir.

// @if (user) {
//   <p>Hello {{ user.name }}</p>
// } @else {
//   <p>Please log in</p>
// }

else if Zincirleri

Koşulları at-else if kullanarak zincirleyebilir, ardından son bir at-else ekleyebilirsiniz.

// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }

Koşul Sonucunu Saklama

at-if bloğu, koşul sonucunu as anahtar sözcüğüyle yerel bir değişkene bağlayabilir; bu, null olmayan daraltma için kullanışlıdır.

// @if (user(); as u) {
//   <p>{{ u.name }}</p>
// }

Yeni Söz Dizimi Neden Kullanılıyor

Yerleşik denetim akışı, yapısal yönergelerden daha okunabilir, tür denetimli ve verimlidir. Eski yönergelerin mikro söz dizimini ve yıldızını kullanmaz.

Kapsayıcı Öge Gerekmez

Eski kalıpların aksine at-if bloğu, bir sarmalayıcı öge veya ng-template gerektirmez. Süslü parantezler koşullu içeriğin sınırlarını kendileri belirler.

Blokları İç İçe Yerleştirme

Denetim akışı blokları serbestçe iç içe yerleştirilebilir. Bir at-if başka bir at-if, bir at-for ve benzerlerini içerebilir.

Bağlamalarla Birleştirme

Bir at-if bloğunun içinde tam şablon dilini kullanabilirsiniz: enterpolasyon, özellik bağlamaları ve olay bağlamalarının tümü normal şekilde çalışır.

Hızlı Kontrol: Koşullular

Yeni koşullu söz dizimi.

İnteraktif derste cevapla

Özet: Koşullular

Koşullu oluşturma için at-if bloğunu, alternatifler için at-else ve at-else if bloklarını, sonucu yakalamak içinse as anahtar sözcüğünü öğrendiniz. Bunlar star-ngIf'nin yerini alır ve içe aktarma gerektirmez. Sıradaki konu: at-for ile döngü oluşturma.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 38
Dersler: 144

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“@if ile Koşullu Görüntüleme” dersi ücretsiz mi?

Evet — “@if ile Koşullu Görüntüleme” 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.

“@if ile Koşullu Görüntüleme” dersinde ne öğreneceğim?

İçeriği @if ve @else ile koşullu olarak gösterin. 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 1. dersidir.

“@if ile Koşullu Görüntüleme” 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.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön