For a personal challenge, I am working on creating a website that showcases a list of League Of Legends champions. Users can click on the champion icons to access more details.
However, I am facing an issue where the champion details (specifically images) seem to display one click late.
https://i.sstatic.net/faco7.jpg
When I clicked on the image of Kaisa, the image of the previous champ is displayed instead.
This is how I retrieve my data:
PARENT TS
export class ChampionListComponent implements OnInit {
public displayPopup = false;
public selectedChamp: Observable<any>;
constructor(private store: Store<LolState>) { }
ngOnInit() {
this.selectedChamp = this.store.pipe(select(selectChampDetails));
}
selectChamp(name) {
this.displayPopup = true;
this.store.dispatch(new GetChampionsDetails(name));
}
PARENT HTML
<ul class="champion_list">
<li (click)="selectChamp(champion.key)">
...List of champions
</li>
</ul>
<ng-container *ngIf="displayPopup">
<app-champion-details *ngIf="selectedChamp | async as champ" [selectedChamp]="champ"></app-champion-details>
</ng-container>
CHILD TS
export class ChampionDetailsComponent implements OnInit {
@Input() selectedChamp: any;
public skins: Array<{path: string}>;
constructor() { }
ngOnInit(): void {
if (this.selectedChamp.skins) {
this.skins = this.selectedChamp.skins.map(skin => {
return {path: 'LINK'}
})
}
}
CHILD HTML
<section *ngIf="selectedChamp as Champ" class="container">
<carousel cellWidth="100%" cellToShow="1" [loop]="true" [images]="skins"></carousel>
<div class="champ_infos">
<h2>{{Champ.id | titlecase}}</h2>
<h3>{{Champ.title | titlecase}}</h3>
<article>
{{Champ.lore}}
</article>
</div>
</section>
The information is retrieved from my service, which is called by an effect that dispatches actions to store data in my state. The data is correctly stored in my state, as confirmed by console.log displaying the correct information in the parent component.
It seems like Angular may be trying to execute the map function before fully receiving the input?
Edit: I replaced
*ngIf="selectedChamp as Champ"*ngIf="skins" in the child component to ensure the content is only shown once fully loaded. You can see the result in the provided gif.
https://i.sstatic.net/cs9hJ.gif
(I have omitted some irrelevant code for clarity. If there are typos or unknown variables, please disregard them as they are not related to the issue)