Betinget visning med @if
Vis innhold betinget med @if og @else.
Betinget visning med @if er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Innebygd kontrollflyt
Moderne Angular-maler inneholder blokker for innebygd kontrollflyt skrevet med krøllalfa. De erstatter de eldre strukturdirektivene og krever ingen importer.
if-blokken
at-if-blokken gjengir innhold betinget. De skriver en krøllalfa etterfulgt av ordet if, betingelsen i parentes og innholdet i krøllparenteser.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }Erstatte ngIf
Dette erstatter det gamle strukturdirektivet *ngIf. Den nye syntaksen er en del av malspråket, så ingenting må importeres.
Lese et signal i betingelsen
Betingelsen kan være et hvilket som helst uttrykk, også et signalkall.
// @if (count() > 0) {
// <p>You have items</p>
// }else-blokken
En at-else-blokk inneholder reserveinnhold som vises når betingelsen er usann. Den følger umiddelbart etter avsluttende krøllparentes i if-blokken.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }else if-kjeder
De kan kjede sammen betingelser ved å bruke at-else if, etterfulgt av en siste at-else.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Lagre resultatet av betingelsen
at-if-blokken kan binde resultatet av betingelsen til en lokal variabel med nøkkelordet as, noe som er nyttig for innsnevring til verdier som ikke er null.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Hvorfor den nye syntaksen
Innebygd kontrollflyt er mer lesbar, typesjekket og effektiv enn strukturdirektiver. Den unngår mikrosyntaksen og stjernen i de gamle direktivene.
Ingen containerelementer nødvendig
I motsetning til eldre mønstre krever at-if-blokken ikke et omsluttende element eller ng-template. Det er selve krøllparentesene som avgrenser det betingede innholdet.
Nøstede blokker
Kontrollflytblokker kan nøstes fritt. En at-if kan inneholde en annen at-if, en at-for og så videre.
Kombinere med bindinger
Inne i en at-if-blokk kan De bruke hele malspråket: interpolasjon, egenskapsbindinger og hendelsesbindinger fungerer som normalt.
Hurtigsjekk: Betingelser
Den nye syntaksen for betingelser.
Oppsummering: Betingelser
De har lært at-if-blokken for betinget gjengivelse, med at-else og at-else if for alternativer, samt nøkkelordet as for å hente ut resultatet. Den erstatter star-ngIf og krever ingen import. Neste steg: løkker med at-for.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «Betinget visning med @if» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Betinget visning med @if», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Betinget visning med @if»?
Vis innhold betinget med @if og @else. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Betinget visning med @if»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Betinget visning med @if
- Løkker med @for
- Bytte med @switch
- Utsatt lasting med @defer