如何在具有角度嵌套数据组的材料表中显示拆分标题

【问题标题】：How to show split header in the material table having nested group of data in angular如何在具有角度嵌套数据组的材料表中显示拆分标题
【发布时间】：2023-03-09 04:21:01
【问题描述】：

当数据以嵌套对象数组的形式出现时，我无法在材料表中显示数据。

我想显示当前在 stackblitz 中显示的表格。

如果我用 newData 变量更改现有数据，它将开始破坏整个表格。

谁能指导我如何用物料表中的一组嵌套数据实现拆分表头功能？

我想实现这样的目标。

这是我的堆栈闪电战。 https://stackblitz.com/edit/angular-bklajw-5foa62

【问题讨论】：

您是否在“summary”对象中使用“code”字段？
是的第一列“否”来自代码字段
因为你有分组数据也意味着嵌套数组。使用父表中的嵌套表处理它的最佳方法。
谢谢 vimal.. 我怎样才能在这张桌子上制作粘性标题？ stackoverflow.com/questions/65430713/…

标签： html angular angular-material material-ui

【解决方案1】：

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

dataSource1 = newData;

到

dataSource1 = newData.data.summary;

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

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

【讨论】：

感谢克里斯的回答。如果数组中的位置发生变化怎么办？无论如何在使用 element.data[0].amount 之前检查条件吗？
您可以在{{ }} 之间使用常规的打字稿代码，甚至可以调用方法（如{{ processData(element) }}）。所以你可以在这里做任何你想做的数组操作。
对不起，如果我问的太多了。你可以在stackblitz中提供一个例子吗？stackblitz.com/edit/angular-bklajw-5foa62
谢谢 Chris .. 它有效，我只有一个问题，我现在如何将样式应用于标题？我无法在此处添加粘性标题。 stackoverflow.com/questions/65430713/…