angular - Angular Material Table 嵌套数据源中的 ngFor

Question

我有嵌套数组的数据源，但找不到用 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},
    products: [
      {id:1, 
       name: prodName1,
       price: price1
      },

      {id:2, 
       name: prodName2,
       price: price2
      }
    ] 
   }
]

我需要这样的表：

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

group1   prodName2   price2

group2   prodName1   price1

group2   prodName2   price2

我发现只有 group1、group2 的嵌套行和公共单元格的示例。是否可以使用角度材料表为每个组迭代产品？

标签： angularloopsngformat-table

Answer 1

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

为了满足您的要求，您只需制作另一个具有此类数据的数组。

为此，只需使用以下代码来操作数据。

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