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

Posted 2023-03-05

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

【英文标题】：How to show split header in the material table having nested group of data in angular

【发布时间】：2021-03-28 12:43:08

【问题描述】：

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

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

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

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

我想实现这样的目标。

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

【问题讨论】：

您是否在“summary”对象中使用“code”字段？

是的第一列“否”来自代码字段

因为你有分组数据也意味着嵌套数组。使用父表中的嵌套表处理它的最佳方法。

谢谢 vimal.. 我怎样才能在这张桌子上制作粘性标题？ ***.com/questions/65430713/…

【参考方案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 .. 它有效，我只有一个问题，我现在如何将样式应用于标题？我无法在此处添加粘性标题。 ***.com/questions/65430713/…