html - 如何在具有 Angular 嵌套数据组的 Material 表中显示拆分标题

Question

当数据以嵌套对象数组的形式出现时，我无法在 Material 表中显示数据。
我想显示当前显示在 stackblitz 中的表格。
如果我用我的 更改了现有数据新数据 变量它将开始破坏整个表格。
任何人都可以指导我如何使用 Material 表中的嵌套数据组实现拆分标题功能？
我想实现这样的目标。
这是我的堆栈 Blitz 。
https://stackblitz.com/edit/angular-bklajw-5foa62

Answer 1

数据源必须是要显示的数据数组。所以你必须改变

dataSource1 = newData;

到

dataSource1 = newData.data.summary;

由于对象不同，您还需要更改模板中的列，例如:

<td mat-cell *matCellDef="let element" class="similar-cell-width">{{ element.data[0].amount }}</td>