Templates sock reviews #25
Conversation
This reverts commit 1f7e4c3.
| @@ -47,7 +47,7 @@ <h1 style="margin-top: 25px;">{{ sock.name }}</h1> | |||
| </div> | |||
| </section> | |||
|
|
|||
|
|
|||
| <app-sock-reviews [sockId]="this.sockId"></app-sock-reviews> | |||
There was a problem hiding this comment.
fyi :: in de template kan je de this. laten vallen (weeral 5 characters code minder ;) )
| @@ -11,11 +11,16 @@ import { Review } from './sock.model'; | |||
| templateUrl: './sock-reviews.component.html' | |||
| }) | |||
| export class SockReviewsComponent { | |||
| @Input() sockId!: number | undefined; | |||
There was a problem hiding this comment.
Het ! wil zeggen dat de value altijd gezet is (voor TypeScript, niet voor Angular)
Voor Angular is dat met @Input({required: true}) sockId: number
Aangezien je hier undefined ook accepteert
@Input() sockId: number;
|
|
||
| constructor(private socksService: SocksService) {} | ||
|
|
||
| ngOnInit(): void { | ||
| // HACK: This is not the way to get the sockId!! | ||
| const sockId = +window.location.pathname.split('/')[2]; | ||
| this.sock$ = this.socksService.getById(sockId); | ||
| this.sockId = +window.location.pathname.split('/')[2]; |
There was a problem hiding this comment.
Probeer fields altijd te vermijden.
Een van de oefeningen is "Maak een next button om naar de volgende sock te gaan"
Hiervoor moet je dan een ngOnChanges gaan doen (en later nog andere dingen)
Je kan vb met een getter werken:
get sockId(): number {
return +window.location.pathname.split('/')[2];
}(maar natuurlijk is die window.location NOT the Angular way to go! (nog een andere oefn;)
| @@ -1,3 +1,12 @@ | |||
| @if ((reviews$ | async)?.length === 0){ | |||
There was a problem hiding this comment.
ATTENTION:
Heb je de network tab in de gaten gehouden?
Ben je hier 2x de reviews aan het ophalen?
No description provided.