¿Cómo puedo recorrer un array de objetos dentro de otro array de objetos y mostrarlo en mi HTML usando Angular/Ionic?
Tengo una interfaz así:
export interface SeriesCard {
type: string,
imageUrl: string,
title: string,
category: string,
seriesItems: SeriesItems[];
}
Mi servicio ya tiene datos falsos y mi archivo .ts se ve así:
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);
}
En mi archivo HTML, estoy haciendo un *ngFor para recorrer mis seriesCard así:
{{cards.seriesItems[i].title}}
Mi problema es que necesito recorrer mi SeriesItems[] dentro de mi SeriesCard[] en mi HTML. ¿Cómo lo hago? Porque actualmente, en mis datos falsos, tengo 2 objetos SeriesCards, cada uno con 4 objetos SeriesItems. Pero mi *ngFor solo se está ejecutando dos veces porque se está ejecutando en el nivel superior en lugar de un nivel inferior (SeriesItems[]).
¿Cómo lo arreglo?
Intenté agregar otro *ngFor pero no funcionaba correctamente… Agradezco cualquier ayuda.
EDITAR: Ya he intentado un segundo *ngFor. El HTML que mostré arriba debería mostrar la cantidad de SeriesItems dentro de una sola SeriesCard. En este caso, estaría mostrando 4 elementos, ¡no 8!
davy.ai
Puede intentar utilizar la directiva
*ngFor
con la sintaxislet i = index
para iterar a través de la matrizSeriesItems
dentro de la matrizSeriesCard
.{{cards.seriesItems[i].title}}