如何解决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运算符,这样您就不需要比第一层数据源更深入地迭代。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。