如何使用鍵值對象作為 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;

Answer 1

如果你有兩個接口：

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

和一個服務調用，它將你Foo[]返回到一個列表中，例如lstValues ，其余的應該很容易。 您可以從Object.keys獲得的密鑰