Как использовать объект ключ-значение в качестве источника данных для таблицы угловых материалов

Question

У меня есть ответ API, который выглядит следующим образом:

{
  "2019-02-13": {
    "costs": 117,
    "commission": 271.07
  },
  "2019-02-14": {
    "costs": 123,
    "commission": 160.37
  },
  //etc..
}

Я хочу использовать этот объект в качестве источника данных для моей таблицы данных материала, но я получаю эту ошибку:

Предоставленный источник данных не соответствует массиву, Observable или DataSource

Я попытался использовать определение ячейки, например:

//cost
<td mat-cell *matCellDef="let item | keyvalue"> {{item.value.costs}} </td>
//date
<td mat-cell *matCellDef="let item | keyvalue"> {{item.key}} </td>

Но это не сработало.

Конечно, я мог бы перебрать свой объект и создать массив, подобный этому:

[
  {
    commission: 100,
    costs: 45
    date: '2019-02-13'
  },
  {
    commission: 100,
    costs: 45
    date: '2019-02-13'
  }
]

Это, вероятно, решит мою проблему, но я бы предпочел не делать этого, потому что я чувствую, что это не нужно,

Редактировать

Я исправил это, добавив этот код в мой сервисный звонок:

let data = [];
for (let key in response) {
  let value = response[key];
  let obj = {date: key, commission: value.commission, costs: value.costs}
  data.push(obj);
}
return data;