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

【问题标题】：mat-table from `{foo: {bar: 5, can: 6}, haz: {bar: 7, can: 8}}`?来自`{foo: {bar: 5, can: 6}, haz: {bar: 7, can: 8}}`的mat-table？
【发布时间】：2020-06-04 12:07:20
【问题描述】：

目标：

-------------------
|     | 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>

我在这里遗漏了什么，难道没有一些简单的方法可以根据该输入构建材料表吗？

【问题讨论】：

你能说得更具体一点，你到底想达到什么目的？
我正在尝试从这个简单的嵌套对象生成一个垫表。
在 web 文档中有一个使用简单输入对象数组的完整示例。你审查过吗？ material.angular.io/components/table/overview
在我的示例中没有数组......并且标题和列标题提前不知道。
没有简单的方法可以从该输入构造表。您需要使用 Object.keys(tableObj) 解析列名，然后您需要为每一行构造一个对象并将其添加到数组中。我想我可以试着给你举个例子，你确定你不能用更好的方式来组织你的表数据吗？

标签： angular html-table angular-material dynamic-tables angular-material-table

【解决方案1】：

这可以通过下面的代码使用Object.keys() 和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。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：