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

我需要 table 这样的：

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

group1   prodName2   price2

group2   prodName1   price1

group2   prodName2   price2

我发现仅包含嵌套行和组 1、组 2 的公共单元格的示例。是否可以使用 angular material table 为每个组迭代产品？

Answer 1

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

为了达到您的要求，您只需创建另一个包含此类数据的数组。

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

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

Answer 2

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

Angular Material Table 嵌套数据源中的 ngFor

ngFor in Angular Material Table nested datasource

angular

loops

ngfor

mat-table