Introduktion til Pipes
Det er ofte nødvendigt at vise data på en måde, der er klar og visuelt tiltalende. Dette kan omfatte formatering af navne, datoer, priser, procenter eller listeelementer.
Hvis alle disse transformationer håndteres manuelt i komponentens logik, kan vores skabeloner hurtigt blive rodede og uoverskuelige. For at løse dette tilbyder Angular en enkel og overskuelig funktion kaldet pipes — en metode til at transformere data direkte i skabelonen.
Hvad er Pipes?
Pipes i Angular er en praktisk metode til at transformere data direkte i skabelonen. De gør det muligt at formatere eller manipulere værdier som datoer, tal eller strenge uden at ændre komponentens forretningslogik.
Tænk på en pipe som et værktøj, der tager rå data ind, behandler dem og leverer en modificeret version — lidt ligesom et filter i en datastrøm.
Pipes hjælper med at holde skabeloner rene og læsbare ved at håndtere dataformatering direkte i koden.
Brug af pipes i Angular
Når du har brug for at formatere data direkte i skabelonen, kan du anvende en pipe ved hjælp af | (pipe)-symbolet:
{{ value | pipeName }}
Det er endda muligt at kæde flere pipes sammen:
{{ value | pipe1 | pipe2 }}
Nogle pipes accepterer også parametre, som du angiver ved hjælp af kolon (:):
{{ value | pipeName:param1:param2 }}
Angular leveres med et sæt indbyggede pipes til at håndtere almindelige formateringsbehov — fra tal og datoer til valuta og store/små bogstaver. Her gennemgås eksempler fra praksis, begyndende med det grundlæggende og videre til mere avancerede anvendelser.
Strengtransformation
Antag, at du har en egenskab username i din komponent. Det er ofte nyttigt at fremhæve eller understrege et brugernavn ved at vise det med store bogstaver.
template.html
component.ts
Her hentes egenskaben userName fra komponenten og omdannes til store bogstaver ved hjælp af Angulars indbyggede uppercase pipe.
Så hvis userName = 'alex', vil outputtet på siden være: ALEX.
Formatering af datoer
Ud over strenge er en af de mest almindelige datatyper, du skal formatere, en dato.
Forestil dig, at du har et user-objekt. Du vil vise datoen, hvor brugeren tilmeldte sig, i et klart og læsbart format:
template.html
component.ts
If user.dateJoined = new Date(2023, 3, 15), the result would be: Joined on: April 15, 2023.
I TypeScript (ligesom i JavaScript) bruger Date-konstruktøren måneder, der starter fra nul — hvilket betyder, at 0 er januar, 1 er februar osv. Så 3 svarer til april.
date-pipen understøtter en bred vifte af formater, såsom short, medium, fullDate eller endda brugerdefinerede formater som dd/MM/yyyy.
Visning af valuta
Du arbejder med et product-objekt. For at vise prisen i en bestemt valuta, brug currency-pipen:
template.html
component.ts
Hvis product.price = 199.99, vil output være: Price: $199.99.
Du kan tilpasse currency pipe med lokalitetsindstillinger, visningsstil og om valutasymbolet skal vises eller ej.
Der findes mange andre nyttige pipes i Angular. Selvom du ikke gennemgår dem alle her, finder du nedenfor en hurtig referenceliste over pipes, der endnu ikke er nævnt:
For at lære mere om hver pipe, besøg den officielle Angular dokumentation.
1. Hvilket symbol bruges til at anvende en pipe i en Angular-skabelon?
2. Hvad vil output være for følgende kode, hvis userName = 'anna':
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
What are some examples of using pipes in Angular templates?
Can I create my own custom pipes in Angular?
How do I pass parameters to a pipe in Angular?
Awesome!
Completion rate improved to 3.13Introduktion til Pipes
Stryg for at vise menuen
Det er ofte nødvendigt at vise data på en måde, der er klar og visuelt tiltalende. Dette kan omfatte formatering af navne, datoer, priser, procenter eller listeelementer.
Hvis alle disse transformationer håndteres manuelt i komponentens logik, kan vores skabeloner hurtigt blive rodede og uoverskuelige. For at løse dette tilbyder Angular en enkel og overskuelig funktion kaldet pipes — en metode til at transformere data direkte i skabelonen.
Hvad er Pipes?
Pipes i Angular er en praktisk metode til at transformere data direkte i skabelonen. De gør det muligt at formatere eller manipulere værdier som datoer, tal eller strenge uden at ændre komponentens forretningslogik.
Tænk på en pipe som et værktøj, der tager rå data ind, behandler dem og leverer en modificeret version — lidt ligesom et filter i en datastrøm.
Pipes hjælper med at holde skabeloner rene og læsbare ved at håndtere dataformatering direkte i koden.
Brug af pipes i Angular
Når du har brug for at formatere data direkte i skabelonen, kan du anvende en pipe ved hjælp af | (pipe)-symbolet:
{{ value | pipeName }}
Det er endda muligt at kæde flere pipes sammen:
{{ value | pipe1 | pipe2 }}
Nogle pipes accepterer også parametre, som du angiver ved hjælp af kolon (:):
{{ value | pipeName:param1:param2 }}
Angular leveres med et sæt indbyggede pipes til at håndtere almindelige formateringsbehov — fra tal og datoer til valuta og store/små bogstaver. Her gennemgås eksempler fra praksis, begyndende med det grundlæggende og videre til mere avancerede anvendelser.
Strengtransformation
Antag, at du har en egenskab username i din komponent. Det er ofte nyttigt at fremhæve eller understrege et brugernavn ved at vise det med store bogstaver.
template.html
component.ts
Her hentes egenskaben userName fra komponenten og omdannes til store bogstaver ved hjælp af Angulars indbyggede uppercase pipe.
Så hvis userName = 'alex', vil outputtet på siden være: ALEX.
Formatering af datoer
Ud over strenge er en af de mest almindelige datatyper, du skal formatere, en dato.
Forestil dig, at du har et user-objekt. Du vil vise datoen, hvor brugeren tilmeldte sig, i et klart og læsbart format:
template.html
component.ts
If user.dateJoined = new Date(2023, 3, 15), the result would be: Joined on: April 15, 2023.
I TypeScript (ligesom i JavaScript) bruger Date-konstruktøren måneder, der starter fra nul — hvilket betyder, at 0 er januar, 1 er februar osv. Så 3 svarer til april.
date-pipen understøtter en bred vifte af formater, såsom short, medium, fullDate eller endda brugerdefinerede formater som dd/MM/yyyy.
Visning af valuta
Du arbejder med et product-objekt. For at vise prisen i en bestemt valuta, brug currency-pipen:
template.html
component.ts
Hvis product.price = 199.99, vil output være: Price: $199.99.
Du kan tilpasse currency pipe med lokalitetsindstillinger, visningsstil og om valutasymbolet skal vises eller ej.
Der findes mange andre nyttige pipes i Angular. Selvom du ikke gennemgår dem alle her, finder du nedenfor en hurtig referenceliste over pipes, der endnu ikke er nævnt:
For at lære mere om hver pipe, besøg den officielle Angular dokumentation.
1. Hvilket symbol bruges til at anvende en pipe i en Angular-skabelon?
2. Hvad vil output være for følgende kode, hvis userName = 'anna':
Tak for dine kommentarer!
