Bedingtes Rendering mit @if
Zeigen Sie Inhalte mit @if und @else bedingt an.
Bedingtes Rendering mit @if ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Integrierter Kontrollfluss
Moderne Angular-Templates enthalten Blöcke für den integrierten Kontrollfluss, die mit einem At-Zeichen geschrieben werden. Sie ersetzen die älteren strukturellen Direktiven und benötigen keine Imports.
Der if-Block
Der at-if-Block rendert Inhalte abhängig von einer Bedingung. Sie schreiben ein At-Zeichen gefolgt vom Wort if, die Bedingung in runden Klammern und den Inhalt in geschweiften Klammern.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }ngIf ersetzen
Dies ersetzt die alte strukturelle Direktive *ngIf. Die neue Syntax ist Bestandteil der Template-Sprache und muss daher nicht importiert werden.
Ein Signal in der Bedingung lesen
Die Bedingung kann jeder Ausdruck sein, einschließlich eines Signal-Aufrufs.
// @if (count() > 0) {
// <p>You have items</p>
// }Der else-Block
Ein at-else-Block stellt Fallback-Inhalte bereit, wenn die Bedingung false ist. Er folgt unmittelbar auf die schließende Klammer des if-Blocks.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }else-if-Ketten
Sie können Bedingungen mit at-else if verketten und anschließend ein abschließendes at-else verwenden.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Das Ergebnis der Bedingung speichern
Der at-if-Block kann das Ergebnis der Bedingung mit dem Schlüsselwort as an eine lokale Variable binden. Das ist beispielsweise für die Eingrenzung auf Nicht-Null-Werte hilfreich.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Warum die neue Syntax?
Der integrierte Kontrollfluss ist besser lesbar, wird auf Typen geprüft und ist effizienter als strukturelle Direktiven. Er kommt ohne Mikrosyntax und Sternchen der alten Direktiven aus.
Kein Container-Element erforderlich
Anders als ältere Muster benötigt der at-if-Block weder ein umschließendes Element noch ng-template. Die geschweiften Klammern selbst begrenzen den bedingten Inhalt.
Blöcke verschachteln
Blöcke für den Kontrollfluss können beliebig verschachtelt werden. Ein at-if-Block kann beispielsweise einen weiteren at-if-Block, einen at-for-Block und weitere Blöcke enthalten.
Mit Bindings kombinieren
Innerhalb eines at-if-Blocks steht Ihnen die vollständige Template-Sprache zur Verfügung: Interpolation, Property-Bindings und Event-Bindings funktionieren ganz normal.
Schnelltest: Bedingungen
Die neue Syntax für Bedingungen.
Zusammenfassung: Bedingungen
Sie haben den at-if-Block für bedingtes Rendering kennengelernt, außerdem at-else und at-else if für Alternativen sowie das Schlüsselwort as zum Speichern des Ergebnisses. Er ersetzt star-ngIf und benötigt keinen Import. Als Nächstes geht es mit Schleifen und at-for weiter.
Häufig gestellte Fragen
Ist die Lektion „Bedingtes Rendering mit @if“ kostenlos?
Ja — der vollständige Text von „Bedingtes Rendering mit @if“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Bedingtes Rendering mit @if“?
Zeigen Sie Inhalte mit @if und @else bedingt an. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Bedingtes Rendering mit @if“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Bedingtes Rendering mit @if
- Schleifen mit @for
- Verzweigen mit @switch
- Verzögertes Laden mit @defer