angular JS 动态表单表头，动态列，列多了 自动滚动条，少了没用滚动条，最下面一层表头宽度一样

[songweida8076]

json 格式：
{
"status": true,
"message": null,
"data": {
"类型3": [
{
"projectType": "类型3",
"viewsList": [
"A",
"B",
"C",
"D",
"E"
],
"units": "C",
"projectName": "测试",
"point": "demo.DEMO_AI038"
},
{
"projectType": "类型3",
"viewsList": [
"A",
"B"
],
"units": "C",
"projectName": "1233423",
"point": "demo.DEMO_AI011"
}
],
"类型2": [
{
"projectType": "类型2",
"viewsList": [
"E"
],
"units": "C",
"projectName": "测试修改",
"point": "demo.DEMO_AI002"
}
]
},
"temp": null
}

想要实现的样子：




目前做的写了N个循环 不太好，而且最下一层表头宽度不一。有个nzWidthConfig，不知道咋动态设定和nzScroll 滚动条相关。
html:
<nz-table
#groupingTable
[nzData]="displayData"
nzBordered
nzSize="middle"
[nzScroll]="{ x:'100%'}">
<thead>


<tr>
<th rowspan="4" nzLeft="0px" >时间</th>
<ng-template ngFor let-name [ngForOf]="objectKeys(this.data)" let-i="index">
<ng-template ngFor let-item [ngForOf]="this.data[name]" let-j="index">

<th *ngIf="j==this.data[name].length-1" [attr.colspan] ="item.num" >{{name}}</th>
</ng-template>
</ng-template>
</tr>

<tr>
<ng-template ngFor let-name [ngForOf]="objectKeys(this.data)" let-i="index">
<th *ngFor="let item of this.data[name];index as b" [attr.colspan] ="item.viewsList.length" >{{item.projectName}}</th>
</ng-template>
</tr>

<tr>
<ng-template ngFor let-name [ngForOf]="objectKeys(this.data)" let-i="index">
<ng-template ngFor let-item [ngForOf]="this.data[name]" let-j="index">
<ng-template ngFor let-views [ngForOf]="item.viewsList">
<th>{{views}}</th>
</ng-template>
</ng-template>
</ng-template>
</tr>

<tr>
<ng-template ngFor let-name [ngForOf]="objectKeys(this.data)" let-i="index">
<ng-template ngFor let-item [ngForOf]="this.data[name]" let-j="index">
<ng-template ngFor let-views [ngForOf]="item.viewsList">
<th nzWidth="50px">{{item.units}}</th>
</ng-template>
</ng-template>
</ng-template>
</tr>
</thead>
<tbody>
<!--<tr *ngFor="let data of groupingTable.data">-->
<!--<td nzLeft="0px">{{data.name}}</td>-->
<!--<td>{{data.street}}</td>-->
<!--<td>{{data.building}}</td>-->
<!--<td>{{data.number}}</td>-->
<!--<td>{{data.companyAddress}}</td>-->
<!--<td>{{data.companyName}}</td>-->
<!--</tr>-->
</tbody>
</nz-table>
ts:

this.objectKeys(this.data).forEach((name: string) => {
this.colspannum=0;
this.data[name].forEach(item => {
this.colspannum = item.viewsList.length + this.colspannum;
item.num= this.colspannum;
});
});

[讨厌走开啦]

试试自定义滚动条：https://blog.csdn.net/lqlqlq007/article/details/78595173

[songweida8076]

我用的是angular 5 调用antd框架，给些参照也行，谢谢各位大神。大神