mat-table 角度材料数据源格式答案

【问题标题】：mat-table angular material data source formatmat-table 角度材料数据源格式
【发布时间】：2024-05-20 15:10:02
【问题描述】：

我正在使用 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
        }
    }
]

【问题讨论】：

你想如何显示数据？命名列和标题
@programoholic 我想要这种类型的数据{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, { date:1/29/2020 , "new_daily_cases": 1,"new_daily_deaths": 0, "total_cases": 1,"total_recoveries": 0,"total_deaths": 0}, { date:1/30/2020 , "new_daily_cases": 1,"new_daily_deaths": 0,"total_cases": 1, "total_recoveries": 0,"total_deaths": 0},
告诉你的数据？
@programoholic { "date":"1/29/2020", "new_daily_cases": 0, "new_daily_deaths": 0, "total_cases": 0, "total_recoveries": 0, "total_deaths": 0 }, { "date":"1/30/2020", "new_daily_cases": 1, "new_daily_deaths": 0, "total_cases": 1, "total_recoveries": 0, "total_deaths": 0 },

标签： json angular angular-material datasource angular-material-table

【解决方案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

【讨论】：

你也可以使用keyvalue管道，看我的回答

【解决方案2】：

如果你用作数据

data=TIMELINE_ITEMS[0]

可以作为源数据|keyvalue

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

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

见stackblitz

【讨论】：