table-rowspan

方案四（多列方案）

{
  "merge": [
      {"startRow": 0, "endRow": 1, "startCol": 4, "endCol": 4},
      {"startRow": 2, "endRow": 4, "startCol": 4, "endCol": 4},
      {"startRow": 0, "endRow": 4, "startCol": 3, "endCol": 3},
      {"startRow": 0, "endRow": 4, "startCol": 2, "endCol": 2},


      {"startRow": 5, "endRow": 6, "startCol": 4, "endCol": 4},
      {"startRow": 7, "endRow": 9, "startCol": 4, "endCol": 4},
      {"startRow": 5, "endRow": 9, "startCol": 3, "endCol": 3},
      {"startRow": 5, "endRow": 9, "startCol": 2, "endCol": 2},


      {"startRow": 0, "endRow": 9, "startCol": 1, "endCol": 1},
      {"startRow": 0, "endRow": 9, "startCol": 0, "endCol": 0}, 






      {"startRow": 10, "endRow": 11, "startCol": 4, "endCol": 4},
      {"startRow": 12, "endRow": 13, "startCol": 4, "endCol": 4},
      {"startRow": 10, "endRow": 13, "startCol": 3, "endCol": 3},
      {"startRow": 10, "endRow": 13, "startCol": 2, "endCol": 2},

      {"startRow": 14, "endRow": 15, "startCol": 4, "endCol": 4},
      {"startRow": 14, "endRow": 15, "startCol": 3, "endCol": 3},
      {"startRow": 14, "endRow": 15, "startCol": 2, "endCol": 2},

      {"startRow": 10, "endRow": 15, "startCol": 1, "endCol": 1},
      {"startRow": 10, "endRow": 15, "startCol": 0, "endCol": 0}

  ],
  "table": [
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
    

      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-2-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},

     

      {"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},
      {"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA2", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"},

      {"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"} ,
      {"row0col0": "FLS全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C2", "row0col3": "Time 2022-1-17 19:20", "row0col4": "RA1", "row0col5": "Z", "row0col6":"[-1,1]", "row0col7": "-5.611"} 
     
   
  ]
}

<table border="1">
  <thead>
    <th>level1</th>
    <th>level2</th>
    <th>level3</th>
    <th>level4</th>
    <th>level5</th>
    <th>level6</th>
    <th>level7</th>
    <th>level8</th>
  </thead>
  <tbody>
    <ng-container *ngFor="let trs of tableViewData ">
      <tr *ngFor="let item of trs">
        <td [attr.rowspan]="item?.rowspan0" *ngIf="item?.rowspan0">{{item.level1}}</td>
        <td [attr.rowspan]="item?.rowspan1" *ngIf="item?.rowspan1">{{item.level2}}</td>
        <td [attr.rowspan]="item?.rowspan2" *ngIf="item?.rowspan2">{{item.level3}}</td>
        <td [attr.rowspan]="item?.rowspan3" *ngIf="item?.rowspan3">{{item.level4}}</td>
        <td [attr.rowspan]="item?.rowspan4" *ngIf="item?.rowspan4">{{item.level5}}</td>

        <td>{{item.level6}}</td>
        <td>{{item.level7}}</td>
        <td  [ngStyle]="{'color': item?.isWarning?'red': ''}">{{item.level8}}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

ngOnInit():void{
    this.getTableData();
  }
  tableViewData:any = [];
  getTableData() {
    this.http.get('../assets/jsons/test.json').subscribe((data:any) => {
    this.transferTableData(data.table, data.merge);
    });
  }
  transferTableData(table:any, merge:any) {
    let tableArray:Array<TableColumn> = [];
    table.forEach((item: any) => {
      const keysArr =  Object.keys(item);
      tableArray.push({
        level1: item[keysArr[0]],
        level2: item[keysArr[1]],
        level3: item[keysArr[2]],
        level4: item[keysArr[3]],
        level5: item[keysArr[4]],
        level6: item[keysArr[5]],
        level7: item[keysArr[6]],
        level8: item[keysArr[7]],
        isWarning: true
      });
    });
    merge.forEach((item:any) => {
      const rowspanData = item.endRow - item.startRow +  1;
      if (item.startCol === 4 && item.endCol === 4) {
        tableArray[item.startRow].rowspan4 = rowspanData;
      } else if(item.startCol === 3 && item.endCol === 3) {
        tableArray[item.startRow].rowspan3 = rowspanData;
      } else if(item.startCol === 2 && item.endCol === 2) {
        tableArray[item.startRow].rowspan2 = rowspanData;
      } else if(item.startCol === 1 && item.endCol === 1) {
        tableArray[item.startRow].rowspan1 = rowspanData;
      } else if(item.startCol === 0 && item.endCol === 0) {
        tableArray[item.startRow].rowspan0 = rowspanData;
        this.tableViewData.push(cloneDeep(tableArray).splice(item.startRow, rowspanData));
      }
    });
    console.log( this.tableViewData);
  }

方案三（爆红和时间列）

<!--step 3-->
<h3>step 3</h3>
<button (click)="timeChange()"> test clear</button>
<table border="1">
  <thead>
    <th>level1</th>
    <th>level2</th>
    <th>level3</th>
    <th>level4</th>
    <th>level5</th>
    <th>level6</th>
    <th>level7</th>
  </thead>
  <tbody>
    <ng-container *ngFor="let trsItem of tableViewData; let i = index;">
      <tr>
        <td [attr.rowspan]="tableViewData[i].totalRow">{{tableFirstRowViews[i].tr1?.level1}}</td>
        <td [attr.rowspan]="tableViewData[i].totalRow">{{tableFirstRowViews[i].tr1?.level2}}</td>
        <td [attr.rowspan]="tableFirstRowViews[i].tr1?.endRow - tableFirstRowViews[i].tr1?.startRow + 1">{{tableFirstRowViews[i].tr1?.level3}}</td>
        <td  [attr.rowspan]="tableFirstRowViews[i].tr1?.endRow - tableFirstRowViews[i].tr1?.startRow + 1">{{tableFirstRowViews[i].tr1?.level4}}</td>
        <td>{{tableFirstRowViews[i].tr1?.level5}}</td>
        <td>{{tableFirstRowViews[i].tr1?.level6}}</td>
        <td [ngStyle]="{'color': tableFirstRowViews[i].tr1?.isWarning?'red': ''}">{{tableFirstRowViews[i].tr1?.level7}}</td>
      </tr>
      <tr *ngFor="let tableFirstRowViewsItme of tableFirstRowViews[i].otherTrs">
        <!-- <td >{{tableFirstRowViewsItme.level4}}</td> -->
        <td>{{tableFirstRowViewsItme.level5}}</td>
        <td>{{tableFirstRowViewsItme.level6}}</td>
        <td [ngStyle]="{'color': tableFirstRowViewsItme.isWarning?'red': ''}">{{tableFirstRowViewsItme.level7}}</td>
      </tr>

      <ng-container *ngFor="let otherTrsItem of tableOtherRowsViews[i]">
        <tr>
          <td [attr.rowspan]="otherTrsItem.tr1?.endRow - otherTrsItem.tr1?.startRow + 1">{{otherTrsItem.tr1.level3}}</td>
          <td [attr.rowspan]="otherTrsItem.tr1?.endRow - otherTrsItem.tr1?.startRow + 1">{{otherTrsItem.tr1.level4}}</td>
          <td>{{otherTrsItem.tr1.level5}}</td>
          <td>{{otherTrsItem.tr1.level6}}</td>
          <td [ngStyle]="{'color': otherTrsItem.tr1.isWarning?'red': ''}">{{otherTrsItem.tr1.level7}}</td>
        </tr>
        <tr *ngFor="let tableOtherRowsViewsItem of otherTrsItem.otherTrs">
          <!-- <td>{{tableOtherRowsViewsItem.level4}}</td> -->
          <td>{{tableOtherRowsViewsItem.level5}}</td>
          <td>{{tableOtherRowsViewsItem.level6}}</td>
          <td [ngStyle]="{'color': tableOtherRowsViewsItem.isWarning?'red': ''}">{{tableOtherRowsViewsItem.level7}}</td>
        </tr>
      </ng-container>

    </ng-container>

  </tbody>
</table>

import { Component, OnInit, Input, OnChanges, forwardRef } from '@angular/core';
import { TrackChanges } from 'src/app/core/learn-decorator';
import { AppComponent } from 'src/app/app.component';
import { cloneDeep } from 'lodash';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.less'],
  providers:[{provide: AppComponent, useExisting: forwardRef(() => ChildComponent)}]
})
export class ChildComponent  {
  
  constructor(
    private http: HttpClient) {
  }

  ngOnInit():void{
    this.getTableData();
  }
  tableViewData:any = [];
  getTableData() {
    // this.http.get('../assets/jsons/test.json').subscribe((data:any) => {
      // this.tableViewData = data;
      const res = {
        "merge": [
            {"startRow": 0, "endRow": 2, "startCol": 3, "endCol": 3},
            {"startRow": 3, "endRow": 4, "startCol": 3, "endCol": 3},
            {"startRow": 0, "endRow": 2, "startCol": 2, "endCol": 2},
            {"startRow": 3, "endRow": 4, "startCol": 2, "endCol": 2},
            {"startRow": 0, "endRow": 4, "startCol": 1, "endCol": 1},
            {"startRow": 0, "endRow": 4, "startCol": 0, "endCol": 0},  //  0-4为一组，知道每组total值 endRow - startRow + 1
    
            {"startRow": 5, "endRow": 6, "startCol": 3, "endCol": 3},
            {"startRow": 7, "endRow": 7, "startCol": 3, "endCol": 3},
            {"startRow": 5, "endRow": 6, "startCol": 2, "endCol": 2},
            {"startRow": 7, "endRow": 7, "startCol": 2, "endCol": 2},
            {"startRow": 5, "endRow": 7, "startCol": 1, "endCol": 1},
            {"startRow": 5, "endRow": 7, "startCol": 0, "endCol": 0}
    
        ],
        "table": [
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row0col4": "Rotation", "row0col5": "<=20.6nm", "row0col6": "9.06"},
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row1col4": "x", "row1col5": "<=20.0nm", "row1col6": "9.06"},
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row2col4": "y", "row2col5": "<=20.6nm", "row2col6": "30.8"},
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row3col2": "EPWARE-C2", "row0col3": "Time 2021-08", "row3col4": "Rotation", "row3col5": "<=20.0nm", "row3col6": "9.06"},
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row3col2": "EPWARE-C2", "row0col3": "Time 2021-08", "row4col4": "x", "row4col5": "<=20.0nm", "row4col6": "9.06"},
    
            {"row5col0": "FLS全局重复性", "row5col1": "每日", "row5col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row5col4": "Rotation", "row5col5": "<=20.0nm", "row5col6": "9.06"},
            {"row5col0": "FLS全局重复性", "row5col1": "每日", "row5col2": "EPWARE-C1", "row0col3": "Time 2021-06", "row6col4": "x", "row6col5": "<=20.1nm", "row6col6": "9.06"},
            {"row5col0": "FLS全局重复性", "row5col1": "每日", "row6col2": "EPWARE-C2", "row0col3": "Time 2021-08", "row7col4": "Rotation", "row7col5": "<=20.0nm", "row7col6": "26.2"}
         
        ]
      };
      this.tableViewData = this.transferTableData(res.table, res.merge);
      this.getMergeCellList();
    // })
  }
  transferTableData(table:any, merge:any) {
    let tableArray:any = [];
    table.forEach((item: any, index:number) => {
      const keysArr =  Object.keys(item);
      console.log(keysArr);
      const numArr = item[keysArr[5]].match(/\d+\.\d+/g);
      // const numArr2 = item[keysArr[5]].match(/\d+/g)  整数截取
      console.log(numArr[0]);
      tableArray.push({
        level1: item[keysArr[0]],
        level2: item[keysArr[1]],
        level3: item[keysArr[2]],
        level4: item[keysArr[3]],
        level5: item[keysArr[4]],
        level6: item[keysArr[5]],
        level7: item[keysArr[6]],
        isWarning: Number.parseFloat(item[keysArr[6]]) <= numArr[0]?false:true
      });
    });
    let totalRowsArray:any = [];
    merge.forEach((item:any) => {
      if(item.startCol === 0 && item.endCol === 0) {
        totalRowsArray.push(item);
      } else {
        if (item.startCol !== 1 && item.endCol !== 1) {
          Object.assign(tableArray[item.startRow], item)
        }
        
      }
    });
    let tableViews:any = [];
    totalRowsArray.forEach((item:any) => {
      const sum = item.endRow - item.startRow +  1;
      tableViews.push({
        data: cloneDeep(tableArray).splice(item.startRow, sum),
        totalRow: sum,
      })
    });
    console.log(tableViews);

    return tableViews;
  }
  getMergeCellList() {
    this.tableViewData.forEach((item:any) => {
      this.getTableFirstRowView(cloneDeep(item.data));
    });
    console.log(this.tableFirstRowViews);
    console.log(this.tableOtherRowsViews);
    console.log(this.tableViewData);
  }
  tableFirstRowView: any= {
    tr1: {},
    otherTrs:[]
  };
  tableOtherRowsView:Array<{tr1:any, otherTrs:Array<any>}> = [];
  tableFirstRowViews: any = [];
  tableOtherRowsViews:any = [];
  initTableData() {
    this.tableViewData = [];
    this.tableFirstRowView = {
      tr1: {},
      otherTrs:[]
    }
    this.tableOtherRowsView = [];
    this.tableFirstRowViews = [];
    this.tableOtherRowsViews = [];
  }
  getTableFirstRowView(data:any) {
    const data1Clone = cloneDeep(data);
    const data2Clone = cloneDeep(data);
    const data3Clone = cloneDeep(data);
    const sum = data[0].endRow - data[0].startRow;
    this.tableFirstRowView = {
      tr1: data[0],
      otherTrs: data1Clone.splice(1,sum)
    };
    this.tableFirstRowViews.push(this.tableFirstRowView);
    this.getTableOthersRowView(data2Clone.splice(sum + 1, data.length), data3Clone);
  }
  getTableOthersRowView(data:any, originData:any) {
    this.tableOtherRowsView = [];
    data.forEach((item:any) => {
      let copyOriginData =  cloneDeep(originData);
      if(item?.startRow) {
        this.tableOtherRowsView.push({
          tr1: item,
          otherTrs: copyOriginData.splice(item.startRow + 1, item.endRow - item.startRow + 1)
        })
      }
    })
    this.tableOtherRowsViews.push(this.tableOtherRowsView);
  }
  
  timeChange() {
    this.initTableData();
    this.getTableData();
  }
}

方案一（前端平铺数据）

import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

import { WelcomeService } from './services/welcome.service';

import * as _ from 'lodash';

import { LoadingService } from 'src/app/core/loading/loading.service';

import { TableColumnName } from './models/test';
import { cloneDeep } from 'lodash';

export interface VirtualDataInterface {
  index: number;
  name: string;
  age: number;
  address: string;
}
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.less']
})
export class WelcomeComponent implements OnInit{
 



  constructor(
    private welcomeService: WelcomeService,
    private nzMessageService: NzMessageService,
    private loadingService: LoadingService
    ) { }

  ngOnInit() {

    this.getTableData();

  }


  tableData:Array<any> = [];
  totalChilds: Array<any> = [];
  totalChild:any = {
    level1Value: [],
    level2Value: [],
    level3Value: [],
    level4Value: [],
    level5Value: [],
    level6Value: [],
  }

  getTableData() {
    this.welcomeService.geTableDetails().subscribe((res:any) => {
      this.transferTableData(res);
    });
  }
  tableViewData:Array<any> = [];
  totalTableValue: any = [];
  transferTableData(res:any) {
    let count = 0;
    let arr:any = [];
    res.forEach((level1Item:any) => {
      arr = [];
      this.totalChild = {
        level1Value: [],
        level2Value: [],
        level3Value: [],
        level4Value: [],
        level5Value: [],
        level6Value: [],
      }
      level1Item.row = (level1Item.data || []).length;
      this.totalChild.level1Value =   this.totalChild.level1Value.concat(res);
      (level1Item.data || []).forEach((level2Item:any) => {
        level2Item.row = (level2Item.data || []).length;
        this.totalChild.level2Value =  this.totalChild.level2Value.concat(level2Item);
       ( level2Item.data || []).forEach((level3Item: any) => {
          level3Item.row = (level3Item.data || []).length;
          this.totalChild.level3Value =   this.totalChild.level3Value.concat(level3Item);
          (level3Item.data || []).forEach((level4Item:any) => {
            level4Item.row = (level4Item.data || []).length;
            this.totalChild.level4Value =   this.totalChild.level4Value.concat(level4Item);
            (level4Item.data || []).forEach((level5Item:any) => {
              level5Item.row = (level5Item.data || []).length;
              this.totalChild.level5Value =   this.totalChild.level5Value.concat(level5Item);
              (level5Item.data || []).forEach((level6Item:any) => {
                level6Item.row = ((level6Item.data) || []).length;
                this.totalChild.level6Value =   this.totalChild.level6Value.concat(level6Item);
               arr.push({
                  level1Value: level1Item.name,
                  level2Value: level2Item.name,
                  level3Value: level3Item.name,
                  level4Value: level4Item.name,
                  level5Value: level5Item.name,
                  level6Value: level6Item.name,
                  tr: count
                });
                this.totalTableValue.push({
                  level1Value: level1Item.name,
                  level2Value: level2Item.name,
                  level3Value: level3Item.name,
                  level4Value: level4Item.name,
                  level5Value: level5Item.name,
                  level6Value: level6Item.name,
                  tr: count
                })
              })
            })
          });
        });
      });
      count++;
      this.tableViewData.push(arr);
      this.totalChilds.push(this.totalChild);
    });
  
    this.tableViewData.forEach((item:any, index: number) => {
      this.getTableMap(index);
      this.getMergeLevel3Cell(index);
      this.getTableFirstRowView(cloneDeep(item));
    });
  
    console.log(this.tableViewData);
    console.log(this.totalTableValue)
    console.log(this.tableFirstRowViews);
    console.log(this.tableOtherRowsViews);
  }
  
  tableMap:any = new Map();
  tableMapArray:any = [];
  getTableMap(index:number) {
   this.tableMap['level1Value'] = {totalChildCount:this.totalChilds[index].level1Value.length, tatalChildValue: this.totalChilds[index].level1Value};
    this.tableMap['level2Value'] = {totalChildCount:this.totalChilds[index].level2Value.length, tatalChildValue: this.totalChilds[index].level2Value};
    this.tableMap['level3Value'] = {totalChildCount:this.totalChilds[index].level3Value.length, tatalChildValue: this.totalChilds[index].level3Value};
    this.tableMap['level4Value'] = {totalChildCount:this.totalChilds[index].level4Value.length, tatalChildValue: this.totalChilds[index].level4Value};
    this.tableMap['level5Value'] = {totalChildCount:this.totalChilds[index].level5Value.length, tatalChildValue: this.totalChilds[index].level5Value};
    this.tableMap['level6Value'] = {totalChildCount:this.totalChilds[index].level6Value.length, tatalChildValue: this.totalChilds[index].level6Value};
    this.tableMapArray.push(this.tableMap);
  }

  getMergeLevel3Cell(index:number) {
    let sumRow = 0;
    let maxLength  = this.tableMapArray[index]['level3Value'].tatalChildValue.length - 1;
    this.tableViewData[index][0].level3Col = this.tableMapArray[index]['level3Value'].tatalChildValue[0].row;
    this.tableViewData[index][0].startIndex = 0;
    this.tableViewData[index][0].endIndex = this.tableMapArray[index]['level3Value'].tatalChildValue[0].row - 1;
    this.tableMapArray[index]['level3Value'].tatalChildValue.forEach((item:any, ind: number) => {
      if (ind < maxLength ) {
        sumRow = sumRow + item.row;
        this.tableViewData[index][sumRow].level3Col =  item.row;
        this.tableViewData[index][sumRow].startIndex = sumRow;
        this.tableViewData[index][sumRow].endIndex = sumRow + item.row - 1;
      }
    });
  }

  tableFirstRowView: any= {
    tr1: {},
    otherTrs:[]
  };
  tableOtherRowsView:Array<{tr1:any, otherTrs:Array<any>}> = [];
  tableFirstRowViews: any = [];
  tableOtherRowsViews:any = [];
  getTableFirstRowView(data:any) {
    const data1Clone = cloneDeep(data);
    const data2Clone = cloneDeep(data);
    const data3Clone = cloneDeep(data);
    this.tableFirstRowView = {
      tr1: data[0],
      otherTrs: data1Clone.splice(1,data[0].level3Col - 1)
    };
    this.tableFirstRowViews.push(this.tableFirstRowView);
    this.getTableOthersRowView(data2Clone.splice(data[0].level3Col, data.length), data3Clone);
  }

  getTableOthersRowView(data:any, originData:any) {
    this.tableOtherRowsView = [];
    data.forEach((item:any) => {
      let copyOriginData =  cloneDeep(originData);
      if(item?.level3Col) {
        this.tableOtherRowsView.push({
          tr1: item,
          otherTrs: copyOriginData.splice(item.startIndex + 1, item.level3Col - 1)
        })
      }
    })
    this.tableOtherRowsViews.push(this.tableOtherRowsView);
  }

}

html

<section id="welcome-page-section">
  <nz-table #colSpanTable [nzTemplateMode]="true" [nzData]="totalTableValue" nzBordered>
    <thead>
      <tr>
        <th>level1Value</th>
        <th>level2Value</th>
        <th>level3Value</th>
        <th>level4Value</th>
        <th>level5Value</th>
        <th>level6Value</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let moreRowItem  of tableViewData; let i = index;" >
        <tr>
          <td [attr.rowspan]="tableViewData[i].length">{{tableFirstRowViews[i]?.tr1.level1Value}}</td>
          <td [attr.rowspan]="tableViewData[i].length">{{tableFirstRowViews[i]?.tr1.level2Value}}</td>
          <td [attr.rowspan]="tableFirstRowViews[i]?.tr1.level3Col">{{tableFirstRowViews[i]?.tr1.level3Value}}</td>
          <td>{{tableFirstRowViews[i]?.tr1.level4Value}}</td>
          <td>{{tableFirstRowViews[i]?.tr1.level5Value}}</td>
          <td>{{tableFirstRowViews[i]?.tr1.level6Value}}</td>
        </tr>
       
        <tr *ngFor="let item of tableFirstRowViews[i]?.otherTrs">
          <!-- <td>{{item.leve1}}</td>
          <td >{{item.level2}}</td> -->
          <!-- <td *ngIf="item?.row">{{item.level3}}</td> -->
          <td>{{item.level4Value}}</td>
          <td>{{item.level5Value}}</td>
          <td>{{item.level6Value}}</td>
        </tr>
        <ng-container *ngFor="let itemtr of tableOtherRowsViews[i]">
          <tr>
            <!-- <td>{{itemtr.tr1.leve1}}</td>
            <td>{{itemtr.tr1.level2}}</td> -->
            <td [attr.rowspan]="itemtr.tr1.level3Col">{{itemtr.tr1.level3Value}}</td>
            <td>{{itemtr.tr1.level4Value}}</td>
            <td>{{itemtr.tr1.level5Value}}</td>
            <td>{{itemtr.tr1.level6Value}}</td>
          </tr>
         
          <tr *ngFor="let trs of itemtr.otherTrs">
            <!-- <td>{{trs.leve1}}</td>
            <td >{{trs.level2}}</td> -->
             <!-- <td>{{trs.level3}}</td> -->
            <td>{{trs.level4Value}}</td>
            <td>{{trs.level5Value}}</td>
            <td>{{trs.level6Value}}</td>
          </tr>
        </ng-container>

      </ng-container>
     
      
     
      
    </tbody>
  </nz-table>
 

</section>

方案二：

import { Component, OnInit } from '@angular/core';
import {  empty, from, generate, interval, map, never, Observable, Observer, of, range, repeat, timer } from 'rxjs';
import { concat, concatAll, merge, take } from 'rxjs/operators';
import { RxjsService } from './services/rxjs.service';
import { cloneDeep } from 'lodash';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(
    private rxjsService:RxjsService,
    private http: HttpClient) {
  }

  ngOnInit():void{
    this.getTableData();
  }
  tableViewData:any = [];
  getTableData() {
    this.http.get('../assets/jsons/test.json').subscribe((data:any) => {
      // this.tableViewData = data;
      const res = {
        "merge": [
            {"startRow": 0, "endRow": 2, "startCol": 2, "endCol": 2},
            {"startRow": 3, "endRow": 4, "startCol": 2, "endCol": 2},
            {"startRow": 0, "endRow": 4, "startCol": 1, "endCol": 1},
            {"startRow": 0, "endRow": 4, "startCol": 0, "endCol": 0},  //  0-4为一组，知道每组total值 endRow - startRow + 1
    
            {"startRow": 5, "endRow": 6, "startCol": 2, "endCol": 2},
            {"startRow": 7, "endRow": 7, "startCol": 2, "endCol": 2},
            {"startRow": 5, "endRow": 7, "startCol": 1, "endCol": 1},
            {"startRow": 5, "endRow": 7, "startCol": 0, "endCol": 0}
    
        ],
        "table": [
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row0col3": "Rotation", "row0col4": "<=20nm", "row0col5": "9.06"},
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row1col3": "x", "row1col4": "<=20nm", "row1col5": "9.06"},
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row0col2": "EPWARE-C1", "row2col3": "y", "row2col4": "<=20nm", "row2col5": "9.06"},
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row3col2": "EPWARE-C2", "row3col3": "Rotation", "row3col4": "<=20nm", "row3col5": "9.06"},
            {"row0col0": "WA全局重复性", "row0col1": "每日", "row3col2": "EPWARE-C2", "row4col3": "x", "row4col4": "<=20nm", "row4col5": "9.06"},
    
            {"row5col0": "FLS全局重复性", "row5col1": "每日", "row5col2": "EPWARE-C1", "row5col3": "Rotation", "row5col4": "<=20nm", "row5col5": "9.06"},
            {"row5col0": "FLS全局重复性", "row5col1": "每日", "row5col2": "EPWARE-C1", "row6col3": "x", "row6col4": "<=20nm", "row6col5": "9.06"},
            {"row5col0": "FLS全局重复性", "row5col1": "每日", "row6col2": "EPWARE-C2", "row7col3": "Rotation", "row7col4": "<=20nm", "row7col5": "9.06"}
         
        ]
      };
      this.tableViewData = this.transferTableData(res.table, res.merge);
      this.getMergeCellList();
    })
  }
  transferTableData(table:any, merge:any) {
    let tableArray:any = [];
    table.forEach((item: any, index:number) => {
      const keysArr =  Object.keys(item);
      console.log(keysArr);
      tableArray.push({
        level1: item[keysArr[0]],
        level2: item[keysArr[1]],
        level3: item[keysArr[2]],
        level4: item[keysArr[3]],
        level5: item[keysArr[4]],
        level6: item[keysArr[5]],
      });
    });
    let totalRowsArray:any = [];
    merge.forEach((item:any) => {
      if(item.startCol === 0 && item.endCol === 0) {
        totalRowsArray.push(item);
      } else {
        if (item.startCol !== 1 && item.endCol !== 1) {
          Object.assign(tableArray[item.startRow], item)
        }
        
      }
    });
    let tableViews:any = [];
    totalRowsArray.forEach((item:any) => {
      const sum = item.endRow - item.startRow +  1;
      tableViews.push({
        data: cloneDeep(tableArray).splice(item.startRow, sum),
        totalRow: sum,
      })
    });
    return tableViews;
  }
  getMergeCellList() {
    this.tableViewData.forEach((item:any) => {
      this.getTableFirstRowView(cloneDeep(item.data));
    });
    console.log(this.tableFirstRowViews);
    console.log(this.tableOtherRowsViews);
    console.log(this.tableViewData);
  }
  tableFirstRowView: any= {
    tr1: {},
    otherTrs:[]
  };
  tableOtherRowsView:Array<{tr1:any, otherTrs:Array<any>}> = [];
  tableFirstRowViews: any = [];
  tableOtherRowsViews:any = [];
  initTableData() {
    this.tableViewData = [];
    this.tableFirstRowView = {
      tr1: {},
      otherTrs:[]
    }
    this.tableOtherRowsView = [];
    this.tableFirstRowViews = [];
    this.tableOtherRowsViews = [];
  }
  getTableFirstRowView(data:any) {
    const data1Clone = cloneDeep(data);
    const data2Clone = cloneDeep(data);
    const data3Clone = cloneDeep(data);
    const sum = data[0].endRow - data[0].startRow;
    this.tableFirstRowView = {
      tr1: data[0],
      otherTrs: data1Clone.splice(1,sum)
    };
    this.tableFirstRowViews.push(this.tableFirstRowView);
    this.getTableOthersRowView(data2Clone.splice(sum + 1, data.length), data3Clone);
  }
  getTableOthersRowView(data:any, originData:any) {
    this.tableOtherRowsView = [];
    data.forEach((item:any) => {
      let copyOriginData =  cloneDeep(originData);
      if(item?.startRow) {
        this.tableOtherRowsView.push({
          tr1: item,
          otherTrs: copyOriginData.splice(item.startRow + 1, item.endRow - item.startRow + 1)
        })
      }
    })
    this.tableOtherRowsViews.push(this.tableOtherRowsView);
  }
  
  timeChange() {
    this.initTableData();
    this.getTableData();
  }
}

<!--step 3-->
<h3>step 3</h3>
<button (click)="timeChange()"> test clear</button>
<table border="1">
  <thead>
    <th>level1</th>
    <th>level2</th>
    <th>level3</th>
    <th>level4</th>
    <th>level5</th>
    <th>level6</th>
  </thead>
  <tbody>
    <ng-container *ngFor="let trsItem of tableViewData; let i = index;">
      <tr>
        <td [attr.rowspan]="tableViewData[i].totalRow">{{tableFirstRowViews[i].tr1?.level1}}</td>
        <td [attr.rowspan]="tableViewData[i].totalRow">{{tableFirstRowViews[i].tr1?.level2}}</td>
        <td [attr.rowspan]="tableFirstRowViews[i].tr1?.endRow - tableFirstRowViews[i].tr1?.startRow + 1">{{tableFirstRowViews[i].tr1?.level3}}</td>
        <td>{{tableFirstRowViews[i].tr1?.level4}}</td>
        <td>{{tableFirstRowViews[i].tr1?.level5}}</td>
        <td>{{tableFirstRowViews[i].tr1?.level6}}</td>
      </tr>
      <tr *ngFor="let tableFirstRowViewsItme of tableFirstRowViews[i].otherTrs">
        <td>{{tableFirstRowViewsItme.level4}}</td>
        <td>{{tableFirstRowViewsItme.level5}}</td>
        <td>{{tableFirstRowViewsItme.level6}}</td>
      </tr>

      <ng-container *ngFor="let otherTrsItem of tableOtherRowsViews[i]">
        <tr>
          <td [attr.rowspan]="otherTrsItem.tr1?.endRow - otherTrsItem.tr1?.startRow + 1">{{otherTrsItem.tr1.level3}}</td>
          <td>{{otherTrsItem.tr1.level4}}</td>
          <td>{{otherTrsItem.tr1.level5}}</td>
          <td>{{otherTrsItem.tr1.level6}}</td>
        </tr>
        <tr *ngFor="let tableOtherRowsViewsItem of otherTrsItem.otherTrs">
          <td>{{tableOtherRowsViewsItem.level4}}</td>
          <td>{{tableOtherRowsViewsItem.level5}}</td>
          <td>{{tableOtherRowsViewsItem.level6}}</td>
        </tr>
      </ng-container>

    </ng-container>

  </tbody>
</table>