Angular 角度9/10：基于类别显示产品数据

我有来自subscribe getAllProduct（）的数据要显示在表中：

[{
    "productId": 1,
    "name": "Stuart UC152 Magnetic Stirrer",
    "description": "Stuart UC152 Magnetic Stirrer, max. capacity 15L, Ceramic",
    "isTaxable": true,
    "sku": "UC512                                             ",
    "preferredVendor": "2",
    "pictures": "assets/img/product/magnetic_stirrer.jpg",
    "productGroupId": 3
},
{
    "productId": 2,
    "name": "Dell SE2419HR 24\" ",
    "description": "Dell SE2419HR 24\" Full HD IPS Monitor (HDMI, VGA, 3 Yrs Wrty)",
    "isTaxable": true,
    "sku": "DELL123                                           ",
    "preferredVendor": "1008",
    "pictures": "assets/img/product/lcd_monitor.jpg",
    "productGroupId": 4
},
{
    "productId": 3,
    "name": "Dell PowerEdge T140 Tower Server",
    "description": "Dell PowerEdge T140 Tower Server (E-2124, 8GB, 1TB, H330 Raid Controller)",
    "isTaxable": true,
    "sku": "T140                                              ",
    "preferredVendor": "1008",
    "pictures": "assets/img/product/server.jpg",
    "productGroupId": 4
},
{
    "productId": 4,
    "name": "Lab Binocular Compound Microscope ",
    "description": "AmScope 40X-2500X LED Lab Binocular Compound Microscope with 3D-Stage",
    "isTaxable": true,
    "sku": "DBN450                                            ",
    "preferredVendor": "1",
    "pictures": "assets/img/product/microscope.jpg",
    "productGroupId": 3
}]

问题是当我试图在一个变量中基于productGroupId将所有数据显示到单独的表中时。从图中可以看出，所有产品都是混合的，显示在两个表中，而不是基于productGroupId进行分离。有人能帮我理解如何将它显示在单独的桌子上吗

---

首先，您必须根据产品组id将列表分为两个列表

//Considering all your products are inside variable this.products
let labEquipments = this.products.filter(product => product.productGroupId == 3);
let itTools = this.products.filter(product => product.productGroupId == 4);

然后使用这些相应的列表显示表格

--编辑--

如果您有大量的产品组并动态获取每个列表，那么您可以为相同的产品组创建一个函数

getProductsByGroup(productGroupId){
    return this.products.filter(product => product.productGroupId == productGroupId);
}

---

分享你的代码，继续工作。稍后将共享stackblitz链接。然后，如果产品组的添加量超过，则为每个类别的产品进行申报会变得更麻烦