ngFor在Angular Material Table中嵌套数据源

问题描述

我有带有嵌套数组的数据源，无法找到用mat-table对其进行迭代的方法

my datasource = [
   {
    group: {id: 1,name: name1},products: [
      {id:1,name: prodName1,price: price1
      },{id:2,name: prodName2,price: price2
      }
    ] 
   },{
    group: {id: 2,name: name2},price: price2
      }
    ] 
   }
]

我需要这样的表：

group    product     price
---------------------------------
group1   prodName1   price1

group1   prodName2   price2

group2   prodName1   price1

group2   prodName2   price2

我发现只有组1，组2具有嵌套行和公共单元格的示例。是否可以使用角形材料表对每个组的产品进行迭代？

解决方法

没有办法直接遍历内部组。

要满足您的要求，您只需要制作另一个包含此类数据的数组即可。

为此，只需使用以下代码即可处理数据。

let dataForTable=[];
 dataSource.forEach((group)=>{
  group.forEach(product)=>{
 dataForTable.push({group:group.name,product:product.name,price:product.price})   
}}

我建议您以一种在每个产品中都有组信息的方式来扁平化数据源。只需在数据源上使用.map运算符，这样您就不需要比第一层数据源更深入地迭代。

angular loops mat-table