如何在具有角度嵌套数据组的材料表中显示拆分标题 [英] How to show split header in the material table having nested group of data in angular

问题描述

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

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

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

谁能指导我如何使用材料表中的一组嵌套数据实现拆分标题功能?

我想实现这样的目标.

这是我的堆栈闪电战.

解决方案

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

dataSource1 = newData;

到

dataSource1 = newData.data.summary;

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

I am having trouble displaying data in the material table when the data is coming as a nested array of objects.

I would like to display the table which is currently displayed in the stackblitz.

If I changed the existing data with my newData variable it will start breaking whole table.

Can anybody guide me How I can achieve split header function with group of nested data in the material table?

I would like to achieve something like this.

Here is my stackblitz. https://stackblitz.com/edit/angular-bklajw-5foa62

解决方案

the data source need to be an array of data you want to display. So you have to change

dataSource1 = newData;

to

dataSource1 = newData.data.summary;

You will also need to change the columns in the template since the objects are different, for example:

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

这篇关于如何在具有角度嵌套数据组的材料表中显示拆分标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！