如何使用键值对象作为 Angular Material 表的数据源答案

【问题标题】：How to use key-value object as datasource for Angular Material table如何使用键值对象作为 Angular Material 表的数据源
【发布时间】：2019-07-15 11:09:52
【问题描述】：

我的 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;

【问题讨论】：

在我看来，按照你最后所说的去做，这是一个非常好的编程习惯。如果您的数据来自 API，那么在服务调用期间将它们转换为对象会容易得多。
如果您解决了您的问题，您可以将其添加为下面的“答案”并接受它。
我确实解决了我的问题，但我仍在寻找更好的解决方案。

标签： javascript angular typescript angular-material angular-material-table

【解决方案1】：

如果你有两个接口：

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

和一个服务调用，它将你Foo[] 返回到一个列表中，例如lstValues 其余的应该很容易。您可以从Object.keys 获得的密钥

【讨论】：