Angular 从API检索后在html中显示嵌套循环错误

我是新来的离子3和角。基本上，我想创建一个带有标题的列表（通过PHPAPI从MySQL数据库中获取数据）。标题将显示

类别

，而

项目

将转到

离子项目

部分

但是，当我尝试调用第二个

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>

{{prod.category}
哈哈{{myitem.code}

试试这个

逻辑：

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>

---

根据错误消息，项是一个对象，而不是数组。如何使其成为数组？但在控制台中它是数组，对吗？奇怪的是，你的第二个ngfor完全没有必要。您已经开始迭代数组。我希望所有项目都在类别中分组，如果我只使用1 ngfor，则每个项目的类别都将显示为重复。好的，我明白了。我将在一分钟内更新我的答案。感谢您的努力。让我看一看，很快回来。非常感谢你，因为它正在按预期工作！我能知道为什么我们需要两个类别，一个在外部，另一个在产品阵列中？顺便说一句，我删除了async。在这个特定的实现中，尝试从单个产品中删除类别要比使用堆栈溢出答案更麻烦。你当然可以尝试删除它，但可能没有必要。事实上，我将来可能会在对这一部分有更多了解的情况下这样做。无论如何，非常感谢：）嗨，本，例如，我添加了一个搜索栏。我可以用这个逻辑实现过滤器功能吗？搜索栏可以搜索多个字段，例如代码、描述、计量单位等。您能告诉我如何搜索吗？

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