mat-table 来自`{foo: {bar: 5, can: 6}, haz: {bar: 7, can: 8}}`？

Question

目标：

-------------------
|     | foo | haz |
-------------------
| bar | 5   | 7   |
| can | 6   | 8   |
-------------------

这似乎是一件微不足道的事情……但乍一看，所有明确要求似乎相当复杂：

<ng-container matColumnDef="score">
    <th mat-header-cell *matHeaderCellDef> Score </th>
    <td mat-cell *matCellDef="let user"> {{user.score}} </td>
</ng-container>

我在这里错过了什么，没有一些简单的方法可以从该输入构建 material table 吗？

Answer 1

这是 mat-table 的基本示例的修改后的 stackblitz:

https://stackblitz.com/edit/angular-cj5c3w

您无法在 mat-table 上使用数组作为数据源，但这应该可以满足您的需求。您必须检查副作用和边缘情况。

Answer 2

这可以通过以下代码使用 Object.keys() and Object.reduce() 完成。

private baseData = {
  foo: {bar: 5, can: 6}, 
  haz: {bar: 7, can: 8}
};

columnNames: string[]; 
data: any[];  

ngOnInit() {
  this.columnNames = [' '].concat(Object.keys(this.baseData));
  const objects = Object.keys(this.baseData).map(key => this.baseData[key]);
  this.data = Object.keys(objects[0]).reduce((acc, k) => {
    const entry = { ' ' : k };
    objects.forEach((o, i) => entry[this.columnNames[i + 1]] = o[k]);
    acc.push(entry);
    return acc;
  }, []);    
}

请看下面StackBlitz。