且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-11-20 12:26:34

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

  dataSource1 = newData; 

  dataSource1 = newData.data.summary; 

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

 < td mat-cell * matCellDef ="let element"class =相似单元格宽度"> {{element.data [0] .amount}}</td> 

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>