Implementering av Taskdetailskomponent
På hovedsiden av appen vår ser brukeren en liste over alle oppgaver. Dette gir en rask oversikt over hva som må gjøres.
Men hva om brukeren ønsker å se detaljene for en bestemt oppgave — dens unike ID, nøyaktige tittel og status? For dette trenger vi å lage en egen side for oppgavedetaljer.
Dette kapittelet viser hvordan du bygger TaskDetailsComponent, som åpnes når brukeren navigerer til en spesifikk URL og viser informasjon om en bestemt oppgave.
Opprette en ny komponent
For å vise oppgavedetaljer, oppretter vi en frittstående komponent. Den vil være uavhengig og kan kobles direkte i ruteoppsettet.
Kjør denne kommandoen:
Dette vil opprette filen task-details.component.ts sammen med tilhørende mal, stilark og tester. Du kan trygt slette testfilen hvis du ønsker det.
Implementering av komponenten
På dette stadiet trenger vi kun oppgavens id, tittel og status — dette er all informasjonen vi har om en oppgave. Derfor legger vi bare til en task-egenskap i komponenten.
component.ts
Ikke glem å importere CommonModule i komponenten, da vi trenger det i malen.
Nå skal vi lage malen og tilhørende CSS-stiler:
component.html
component.css
Malen bruker direktivet *ngIf for å vise oppgavekortet dersom oppgaven finnes; ellers vises meldingen "Task not found" ved hjelp av ng-template.
Inne i kortet vises ID, tittel og status for oppgaven, samt en knapp for å gå tilbake til hovedlisten over oppgaver (vi legger til funksjonaliteten for knappen senere).
Nå er TaskDetailsComponent klar til bruk. Vi kobler den til rutingen i neste kapittel.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
How do I connect the TaskDetailsComponent to the routing?
Can you show me how to display the task details in the template?
What should I do if the task is not found?
Awesome!
Completion rate improved to 3.13Implementering av Taskdetailskomponent
Sveip for å vise menyen
På hovedsiden av appen vår ser brukeren en liste over alle oppgaver. Dette gir en rask oversikt over hva som må gjøres.
Men hva om brukeren ønsker å se detaljene for en bestemt oppgave — dens unike ID, nøyaktige tittel og status? For dette trenger vi å lage en egen side for oppgavedetaljer.
Dette kapittelet viser hvordan du bygger TaskDetailsComponent, som åpnes når brukeren navigerer til en spesifikk URL og viser informasjon om en bestemt oppgave.
Opprette en ny komponent
For å vise oppgavedetaljer, oppretter vi en frittstående komponent. Den vil være uavhengig og kan kobles direkte i ruteoppsettet.
Kjør denne kommandoen:
Dette vil opprette filen task-details.component.ts sammen med tilhørende mal, stilark og tester. Du kan trygt slette testfilen hvis du ønsker det.
Implementering av komponenten
På dette stadiet trenger vi kun oppgavens id, tittel og status — dette er all informasjonen vi har om en oppgave. Derfor legger vi bare til en task-egenskap i komponenten.
component.ts
Ikke glem å importere CommonModule i komponenten, da vi trenger det i malen.
Nå skal vi lage malen og tilhørende CSS-stiler:
component.html
component.css
Malen bruker direktivet *ngIf for å vise oppgavekortet dersom oppgaven finnes; ellers vises meldingen "Task not found" ved hjelp av ng-template.
Inne i kortet vises ID, tittel og status for oppgaven, samt en knapp for å gå tilbake til hovedlisten over oppgaver (vi legger til funksjonaliteten for knappen senere).
Nå er TaskDetailsComponent klar til bruk. Vi kobler den til rutingen i neste kapittel.
Takk for tilbakemeldingene dine!
