¿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}}

{{cards.seriesItems[i].description}}

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!