垫子表角度材料数据源格式

Question

我使用的是Angular Material Mat Table。如何将此数据更改为垫子表数据源格式。有人能帮我把这个数据改成垫子表数据源吗？

https://stackblitz.com/angular/jnmrolgdbaj?file=src%2Fapp%2Ftable-基本样本.ts

"timelineitems": [
{
"1/29/2020": {
"new_daily_cases": 0,
"new_daily_deaths": 0,
"total_cases": 0,
"total_recoveries": 0,
"total_deaths": 0
},
"1/30/2020": {
"new_daily_cases": 1,
"new_daily_deaths": 0,
"total_cases": 1,
"total_recoveries": 0,
"total_deaths": 0
},
"1/31/2020": {
"new_daily_cases": 1,
"new_daily_deaths": 0,
"total_cases": 1,
"total_recoveries": 0,
"total_deaths": 0
}
}
]

Answer 1

以下是将给定的数组合并为可迭代数组的方法。

const TIMELINE_ITEMS = [
{
"1/29/2020": {
"new_daily_cases": 0,
"new_daily_deaths": 0,
"total_cases": 0,
"total_recoveries": 0,
"total_deaths": 0
},
"1/30/2020": {
"new_daily_cases": 1,
"new_daily_deaths": 0,
"total_cases": 1,
"total_recoveries": 0,
"total_deaths": 0
},
"1/31/2020": {
"new_daily_cases": 1,
"new_daily_deaths": 0,
"total_cases": 1,
"total_recoveries": 0,
"total_deaths": 0
}
}
];
let finalArray = [];
let data  = TIMELINE_ITEMS[0];
Object.keys(data).forEach((key)=>{
let obj = {
date  : key,
...data[key]  
}
finalArray.push(obj); 
});
console.log(finalArray);

有了平面阵列后，将表columns和datasource设置如下：

this.displayedColumns = Object.keys(finalArray[0]);
this.dataSource = finalArray;

这是正在工作的stackblitz演示：stackblitz demo

Answer 2

如果使用作为数据

data=TIMELINE_ITEMS[0]

您可以使用作为源数据|键值

<table mat-table [dataSource]="data|keyvalue" class="mat-elevation-z8">

和你的列

{{element.key}} 
{{element.value.new_daily_cases}} 
{{element.value.new_daily_deaths}}
...

在这种情况下，我们可以使用哪些Displayed列？。好吧，你可以有一个假的显示列

displayedColumns:string[]=["1","2","3","4","5","6"]

如果我们使用上面显示的列

参见堆叠式