One of the challenges I'm facing involves working with an interface structured like this:
export interface SeriesCard {
type: string,
imageUrl: string,
title: string,
category: string,
seriesItems: SeriesItems[];
}
Currently, my Service contains mocked data and my corresponding .ts file looks like this:
seriesCard: SeriesCard[];
title: string = "";
constructor(private navCtrl: NavController,
private cardService: CardsService,
private navExtraService: NavExtrasServiceService) { }
navigateToPage(seriesItems: SeriesItems) {
this.navExtraService.setExtras(seriesItems);
this.navCtrl.navigateForward([`video-component`]);
}
ngOnInit() {
this.seriesCard = this.cardService.getSeriesCardsArray();
console.log(this.seriesCard);
}
In the HTML file, I am using *ngFor to loop through my seriesCard as shown below:
<ion-content>
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col size="12" *ngFor="let cards of seriesCard; let i = index">
<ion-list class="ion-list-background">
<ion-item (click)="navigateToPage(cards.seriesItems[i])" class="ion-item-background" lines="none" style="border-bottom: 1px solid #343436;">
<ion-avatar slot="start">
<img src="{{cards.seriesItems[i].imageUrl}}" alt="">
</ion-avatar>
<ion-label>
<h2 style="color: #ffffff">{{cards.seriesItems[i].title}}</h2>
<ion-text class="smaller">{{cards.seriesItems[i].description}}</ion-text>
</ion-label>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The challenge arises when trying to iterate through the SeriesItems[] within each SeriesCard[]. The current implementation only loops at the top level rather than delving into the nested SeriesItems[].
Any suggestions on how I can overcome this hurdle?
I did attempt adding another *ngFor, but encountered some issues. Your input would be greatly appreciated.
UPDATE: I have already experimented with a second *ngFor. The intended outcome of the displayed HTML snippet is to showcase the number of SeriesItems within a single SeriesCard, meaning it should display 4 items and not 8!