mat-table angular формат источника данных материала

Question

Я использую Angular Материал 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

Если вы используете в качестве данных

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

В этом случае какие отображаемые столбцы мы можем использовать? Ну, вы можете иметь поддельные отображаемые столбцы

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

, если мы используем столбцы, как показано выше

См. stackblitz

Answer 2

Вот как вы можете объединить данный массив в итеративный массив.

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