Ioni c 5 - категории приостановлены на странице и не повторяют одну и ту же категорию

Question

Я программирую приложение с помощью Ioni c 4/5, и мне нужен выпадающий элемент, например:

Категория (зерновые и макаронные изделия)> Подкатегория (бобовые)> Предметы (бобы 1, бобы 2 , бобы 3, и т. д. c ...)

<ion-content>

  <ion-list padding *ngFor="let item of items">
    <ion-item-divider>
      <ion-label>
        {{item.subCategory}}
      </ion-label>
    </ion-item-divider>

    <ion-item>
      <ion-label>{{item.name}}</ion-label>
      <p slot="end">Price: R${{item.price}}</p>
    </ion-item>
  </ion-list>

</ion-content>
================
page.ts

    this.items = [
        { subCategory: 'Grãos', name: 'Arroz', price: 4.49 },
        { subCategory: 'Grãos', name: 'Feijão', price: 5.99 },
        { subCategory: 'Grãos', name: 'Macarrão Instantâneo', price: 3.29 },
        { subCategory: 'Doces', name: 'Bolachinha Oreo ', price: 2.89 },
        { subCategory: 'Doces', name: 'Bolachinha Trakinas', price: 3.29 },
    ];

РЕДАКТИРОВАТЬ: Если выпадающее меню сложно, просто разделитель ионных элементов с категориями без повторения той же категории и элементы внутри.

(Обс .: Извините за мой английский sh, я бразилец и мне нужно практиковаться.)