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

时间:2019-02-21 13:56:03

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

我有一个如下所示的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;

1 个答案:

答案 0 :(得分:1)

如果您有两个界面:

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

和服务呼叫,可将您Foo[]返回到列表,例如lstValues,其余的应该很容易。您可以从Object.keys

获得的密钥