接口返回的是每行数据而前端要合并单元格再渲染

angular
接口返回的数据结构

目标样式

代码实现
html

    <table style="width: 100%;border-collapse:collapse;" cellspacing="0" cellpadding="0" >
         <tr>
           <ng-container *ngFor="let item of listOfDataTitles; let i = index">
             <th *ngIf="item.orderIndex === (i + 1)">{{item.titleName}}</th>
           </ng-container>
         </tr>
         <tr *ngFor=" let data of listOfDataTableView">
             <td [attr.rowspan]="data.secRow"*ngIf="data.secRow">  {{ data.row1 }} </td>
             <td>{{data.row2}}</td>
             <td>{{data.row3}}</td>
         </tr>
         <tr>
           <td>检查人员</td>
           <td colspan="2"></td>
         </tr>
    </table>

js

 if (res.code === 200) {
        console.log(res.data);
        if (res.data) {
          // 获得每个row1出现的次数，及首次出现的位置
          let rowCountArr: any = [];
          res.data.tableView.forEach((element: any, index: number) => {
            let count: any = 0;
            let title: any = '';
            let indexa: any = '';
            res.data.tableView.forEach((element2: any) => {
              if (element.row1 === element2.row1) {
                count = count + 1;
                title = element.row1;
                indexa = index;
              }
            });
            const obj: any = {};
            obj.title = title;
            obj.count = count;
            obj.index = indexa;
            rowCountArr.push(obj);
          });
          // 此时数组结果为
          // [
          // {title: '6.3kv厂用变', count: 2, index: 0}
	      // {title: '6.3kv厂用变', count: 2, index: 1}
		  // {title: '1号励磁变', count: 2, index: 2}
		  // {title: '1号励磁变', count: 2, index: 3}
		  // {title: '2号励磁变', count: 2, index: 4}
		  // {title: '2号励磁变', count: 2, index: 5}
		  // ]
          // 上面的数组存在重复，下面是去重
          const hash: any = {};
          rowCountArr = rowCountArr.reduce((preVal: any, curVal: any) => {
            hash[curVal.title] ? '' : hash[curVal.title] = true && preVal.push(curVal);
            return preVal;
          }, []);
          console.log(rowCountArr);
		  // 此时数组结果为
		  // [
		  // {title: '6.3kv厂用变', count: 2, index: 0}
		  // {title: '1号励磁变', count: 2, index: 2}
		  // {title: '2号励磁变', count: 2, index: 4}
		  // ]
          this.listOfDataTableView = [];
          res.data.tableView.forEach((element: any, i: number) => {
            rowCountArr.forEach((span: any) => {
              if (span.title === element.row1 && span.index === i) {
                const obj: any = {};
                obj.secRow = span.count;
                obj.row1 = element.row1;
                obj.row2 = element.row2;
                obj.row3 = element.row3;
                this.listOfDataTableView.push(obj);
              } else if (span.title === element.row1 && span.index !== i) {
                const obj: any = {};
                obj.row1 = element.row1;
                obj.row2 = element.row2;
                obj.row3 = element.row3;
                this.listOfDataTableView.push(obj);
              }
            });
          });
          console.log(this.listOfDataTableView);
          // 此时数组结果为		下图所示
         
          this.listOfDataTitles = res.data.titles;
          this.nameValues = res.data.nameValues;
          this.titleName = res.data.titleName;
          this.reportDate = res.data.reportDate;
        }
        this.ref.markForCheck();
      } else {
        this.message.error('数据请求报错');
      }