ошибка вложенного цикла при отображении в html после получения из API

Question

Я новичок в ионной 3 и угловой.В основном я хотел создать список с заголовком (данные из базы данных MySQL через PHP API).В заголовке будет отображаться category, а items перейдет в раздел ion-item.

Однако, когда я пытаюсь вызвать 2-го ngFor, это выдает ошибку, как показано ниже на рисунке.Я заметил, что многие люди используют метод GET, в то время как я использую метод POST, которые сложнее найти решение.Пожалуйста, просветите, спасибо заранее.

JSON

home.ts

this.storage.get('username').then((val) => {
  let headers: any = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
    options: any = { "username": val },
    url: any = "path_to_my_api";

  this.http.post(url, options, headers)
    .subscribe((data: any) => {
      this.prods = data.products;
    },
      (error: any) => {
        console.log(error);
      });
});

home.html

<ion-list *ngFor="let prod of prods | async">
    <ion-list-header>
      {{prod.category}}
    </ion-list-header>
    <ion-item *ngFor="let myitem of prod.item | async">
        <ion-avatar item-start>

        </ion-avatar>
        <h2>haha{{myitem.code}}</h2>
      </ion-item>
  </ion-list>

Answer 1

Попробуйте это

Логика:

this.http.post(url, options, headers)
  .subscribe((data: any) => {
    const categoryMap = data.products.reduce((categories, prod) => {
      if (categories[prod.category]) {
        categories[prod.category].push(prod);
      } else {
        categories[prod.category] = [prod];
      }

      return categories;
    }, {});

    this.categories = Object.keys(categoryMap).map(category => ({
      category,
      products: categoryMap[category]
    });
  }, (error: any) => {
    console.log(error);
  });

Шаблон:

<ion-list *ngFor="let cat of categories | async">
  <ion-list-header>
    {{cat.category}}
  </ion-list-header>
  <ion-item *ngFor="let prod of cat.products | async"> <!-- not sure if async pipe is necessary here though -->
    <ion-avatar item-start></ion-avatar>
    <h2>haha{{prod.item.code}}</h2>
  </ion-item>
</ion-list>

Чтобы уточнить, окончательная структура ваших данных будет выглядеть следующим образом:

this.categories = [
  {
    category: "Beer Bottles",
    products: [
      {
        item: {code: 'whatever'},
        category: "Beer Bottles"
      },
      {
        item: {code: 'something else'},
        category: "Beer Bottles"
      },
      ...etc.
    ]
  },
  {
    category: "Beer Draught",
    products: [ ...relevant products as above]
  }
]