javascript - Key-Value オブジェクトを Angular Material テーブルのデータソースとして使用する方法

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;