javascript - Angular : Group By by property name and show only one if duplicate

Question

有这样的数组(例如篮子里的产品)

[{
    "name": "item 1",
    "id": 1,
    "price": 10
},
{
    "name": "item 2",
    "id": 2,
    "price": 20
},
{
    "name": "item 1",
    "id": 1,
    "price": 10
},
{
    "name": "item 3",
    "id": 3,
    "price": 30
}]

如何在 Angular 8 中执行 *ngFor 以打印如下输出:

• 2x 项目 1，小计 20
• 1x 第 2 项，小计 20
• 1x 第 3 项，小计 30

所以基本上我希望按名称(或 ID)包装重复的项目，并只为它们显示一行。我还应该计算它们的出现次数和小计

Answer 1

您可以在使用前预处理数组。喜欢: Most efficient method to groupby on an array of objects

甚至更好 - 在管道中执行预处理并像这样使用它:

<div *ngFor="entry in items | customGroupByPype">