mat-tableangular material数据源格式

Question

我正在使用 Angular Material Mat-Table。如何将此数据更改为 mat-table 数据源格式。 有人可以帮我将此数据更改为 mat-table 数据源吗？

https://stackblitz.com/angular/jnmrolgdbaj?file=src%2Fapp%2Ftable-basic-example.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);

获得平面阵列后，设置 table 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}}
 ...

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

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

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

见stackblitz