javascript - Cómo usar un objeto clave-valor como fuente de datos para una tabla de Angular Material

Tengo una respuesta de API que se ve así:

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

Quiero usar este objeto como fuente de datos para mi tabla de datos de material, pero obtengo este error:

La fuente de datos proporcionada no coincide con un array, Observable o DataSource

Intenté usar una definición de celda como esta:

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

Pero eso no funcionó.

Por supuesto, podría recorrer mi objeto y hacer un arreglo así:

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

Esto probablemente solucionará mi problema, pero preferiría no hacer esto porque siento que es innecesario.

Editar

Lo arreglé agregando este código a mi llamada de servicio:

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;

Respuesta #1

Si tuvieras dos interfaces:

interface Foo {
  [key:string]: myDataContent[];
}
interface myDataContent{
  costs: number;
  commission: number;
}

y una llamada de servicio que te devuelve Foo[] en una lista, por ejemplo lstValues y el resto debería ser fácil. La clave que podrías obtener de Object.keys