Angular7 + 按照数据结构，主键相同【动态合并单元格】

前言：如果说合并5行则，rowspan为6。

0、原数据

[{"xmZt":"211","sbZt":null,"sbr":null,"xmCj":0,"createDate":1261621391000,"createUser":"郴州市国土资源局","deleteDate":null,"sbSj":1261639630000,"modifyDate":1555460529000,"htGuid":"b6c4374b-5c57-44e3-960c-2d67bacc2251","zdGuid":null,"xmMc":"XXX园经济适用住宅小区","gyFs":1,"xzqDm":"431000000","xzqMc":null,"xmXh":58,"htBh":"(2009)FWX号","dzBaBh":null,"tzztXz":null,"hyFl":null,"tdJb":null,"zdBh":null,"tdZl":null,"gdZmj":6.2468,"gyMj":null,"xzMj":null,"tdYt":"07","crNx":null,"je":null,"gdzcTze":null,"tzQd":null,"ztJzXz":null,"fsJzXz":null,"jzMj":null,"qtTdYq":null,"jdSj":null,"dgSj":1163779200000,"jgSj":1198944000000,"qdRq":1162915200000,"pzWh":null,"pzRq":null,"pzJg":null,"kftzZe":null,"clXzcrMj":null,"clGbxzcrMj":null,"clQtMj":null,"gyWldMj":null,"clCrMj":null,"pcCrMj":null,"clMj":null,"clXq":null,"kflyBz":1,"wkflyYy":null,"qySsLx":null,"srr":null,"cjgsZdGuid":null,"gyggZdGuid":null,"zfXx":null,"wggzdSm":null,"wgszdSm":null,"minRjl":null,"maxRjl":null,"minLhl":null,"maxLhl":null,"minJzMd":null,"maxJzMd":null,"minJzXg":null,"maxJzXg":null,"minRjlTag":null,"maxRjlTag":null,"minJzMdTag":null,"maxJzMdTag":null,"minLhlTag":null,"maxLhlTag":null,"minJzXgTag":null,"maxJzXgTag":null,"sfBcHt":null,"jiafang":null,"yifang":"郴州市城市建设综合开发实业总公司","oldHtGuid":null,"haveBah":null,"bahWjmc":null,"bahWh":null,"bahBdjkbz":null,"bz":null,"gjbgBah":null,"wlBz":"0","zjggMj":null,"gkfqdjxMj":null,"wlydjxMj":null,"cyzcWh":null,"cyzcGuid":null,"wCyzcSm":null,"gyggZdbh":null,"cjgsZdbh":null,"isXcy":null,"xcyxyt":null,"kfqGuid":null,"kfqName":null,"daBh":null,"xzqName":null,"htLx":1},{"xmZt":"211","sbZt":null,"sbr":null,"xmCj":0,"createDate":1261621391000,"createUser":"郴州市国土资源局","deleteDate":null,"sbSj":1261639630000,"modifyDate":1555460529000,"htGuid":"b6c4374b-5c57-44e3-960c-2d67bacc2251","zdGuid":null,"xmMc":"XXX园经济适用住宅小区","gyFs":1,"xzqDm":"431000000","xzqMc":null,"xmXh":58,"htBh":"(2009)FWX号","dzBaBh":null,"tzztXz":null,"hyFl":null,"tdJb":null,"zdBh":null,"tdZl":null,"gdZmj":6.2468,"gyMj":null,"xzMj":null,"tdYt":"07","crNx":null,"je":null,"gdzcTze":null,"tzQd":null,"ztJzXz":null,"fsJzXz":null,"jzMj":null,"qtTdYq":null,"jdSj":null,"dgSj":1163779200000,"jgSj":1198944000000,"qdRq":1162915200000,"pzWh":null,"pzRq":null,"pzJg":null,"kftzZe":null,"clXzcrMj":null,"clGbxzcrMj":null,"clQtMj":null,"gyWldMj":null,"clCrMj":null,"pcCrMj":null,"clMj":null,"clXq":null,"kflyBz":1,"wkflyYy":null,"qySsLx":null,"srr":null,"cjgsZdGuid":null,"gyggZdGuid":null,"zfXx":null,"wggzdSm":null,"wgszdSm":null,"minRjl":null,"maxRjl":null,"minLhl":null,"maxLhl":null,"minJzMd":null,"maxJzMd":null,"minJzXg":null,"maxJzXg":null,"minRjlTag":null,"maxRjlTag":null,"minJzMdTag":null,"maxJzMdTag":null,"minLhlTag":null,"maxLhlTag":null,"minJzXgTag":null,"maxJzXgTag":null,"sfBcHt":null,"jiafang":null,"yifang":"郴州市城市建设综合开发实业总公司","oldHtGuid":null,"haveBah":null,"bahWjmc":null,"bahWh":null,"bahBdjkbz":null,"bz":null,"gjbgBah":null,"wlBz":"0","zjggMj":null,"gkfqdjxMj":null,"wlydjxMj":null,"cyzcWh":null,"cyzcGuid":null,"wCyzcSm":null,"gyggZdbh":null,"cjgsZdbh":null,"isXcy":null,"xcyxyt":null,"kfqGuid":null,"kfqName":null,"daBh":null,"xzqName":null,"htLx":1},{"xmZt":"211","sbZt":null,"sbr":null,"xmCj":0,"createDate":1261621391000,"createUser":"郴州市国土资源局","deleteDate":null,"sbSj":1261639630000,"modifyDate":1555460529000,"htGuid":"b6c4374b-5c57-44e3-960c-2d67bacc2251","zdGuid":null,"xmMc":"XXX园经济适用住宅小区","gyFs":1,"xzqDm":"431000000","xzqMc":null,"xmXh":58,"htBh":"(2009)FWX号","dzBaBh":null,"tzztXz":null,"hyFl":null,"tdJb":null,"zdBh":null,"tdZl":null,"gdZmj":6.2468,"gyMj":null,"xzMj":null,"tdYt":"07","crNx":null,"je":null,"gdzcTze":null,"tzQd":null,"ztJzXz":null,"fsJzXz":null,"jzMj":null,"qtTdYq":null,"jdSj":null,"dgSj":1163779200000,"jgSj":1198944000000,"qdRq":1162915200000,"pzWh":null,"pzRq":null,"pzJg":null,"kftzZe":null,"clXzcrMj":null,"clGbxzcrMj":null,"clQtMj":null,"gyWldMj":null,"clCrMj":null,"pcCrMj":null,"clMj":null,"clXq":null,"kflyBz":1,"wkflyYy":null,"qySsLx":null,"srr":null,"cjgsZdGuid":null,"gyggZdGuid":null,"zfXx":null,"wggzdSm":null,"wgszdSm":null,"minRjl":null,"maxRjl":null,"minLhl":null,"maxLhl":null,"minJzMd":null,"maxJzMd":null,"minJzXg":null,"maxJzXg":null,"minRjlTag":null,"maxRjlTag":null,"minJzMdTag":null,"maxJzMdTag":null,"minLhlTag":null,"maxLhlTag":null,"minJzXgTag":null,"maxJzXgTag":null,"sfBcHt":null,"jiafang":null,"yifang":"郴州市城市建设综合开发实业总公司","oldHtGuid":null,"haveBah":null,"bahWjmc":null,"bahWh":null,"bahBdjkbz":null,"bz":null,"gjbgBah":null,"wlBz":"0","zjggMj":null,"gkfqdjxMj":null,"wlydjxMj":null,"cyzcWh":null,"cyzcGuid":null,"wCyzcSm":null,"gyggZdbh":null,"cjgsZdbh":null,"isXcy":null,"xcyxyt":null,"kfqGuid":null,"kfqName":null,"daBh":null,"xzqName":null,"htLx":1},{"xmZt":"211","sbZt":null,"sbr":null,"xmCj":0,"createDate":1261621391000,"createUser":"郴州市国土资源局","deleteDate":null,"sbSj":1261639630000,"modifyDate":1555460529000,"htGuid":"b6c4374b-5c57-44e3-960c-2d67bacc2251","zdGuid":null,"xmMc":"XXX园经济适用住宅小区","gyFs":1,"xzqDm":"431000000","xzqMc":null,"xmXh":58,"htBh":"(2009)FWX号","dzBaBh":null,"tzztXz":null,"hyFl":null,"tdJb":null,"zdBh":null,"tdZl":null,"gdZmj":6.2468,"gyMj":null,"xzMj":null,"tdYt":"07","crNx":null,"je":null,"gdzcTze":null,"tzQd":null,"ztJzXz":null,"fsJzXz":null,"jzMj":null,"qtTdYq":null,"jdSj":null,"dgSj":1163779200000,"jgSj":1198944000000,"qdRq":1162915200000,"pzWh":null,"pzRq":null,"pzJg":null,"kftzZe":null,"clXzcrMj":null,"clGbxzcrMj":null,"clQtMj":null,"gyWldMj":null,"clCrMj":null,"pcCrMj":null,"clMj":null,"clXq":null,"kflyBz":1,"wkflyYy":null,"qySsLx":null,"srr":null,"cjgsZdGuid":null,"gyggZdGuid":null,"zfXx":null,"wggzdSm":null,"wgszdSm":null,"minRjl":null,"maxRjl":null,"minLhl":null,"maxLhl":null,"minJzMd":null,"maxJzMd":null,"minJzXg":null,"maxJzXg":null,"minRjlTag":null,"maxRjlTag":null,"minJzMdTag":null,"maxJzMdTag":null,"minLhlTag":null,"maxLhlTag":null,"minJzXgTag":null,"maxJzXgTag":null,"sfBcHt":null,"jiafang":null,"yifang":"郴州市城市建设综合开发实业总公司","oldHtGuid":null,"haveBah":null,"bahWjmc":null,"bahWh":null,"bahBdjkbz":null,"bz":null,"gjbgBah":null,"wlBz":"0","zjggMj":null,"gkfqdjxMj":null,"wlydjxMj":null,"cyzcWh":null,"cyzcGuid":null,"wCyzcSm":null,"gyggZdbh":null,"cjgsZdbh":null,"isXcy":null,"xcyxyt":null,"kfqGuid":null,"kfqName":null,"daBh":null,"xzqName":null,"htLx":1},{"xmZt":"211","sbZt":null,"sbr":null,"xmCj":0,"createDate":1261621391000,"createUser":"郴州市国土资源局","deleteDate":null,"sbSj":1261639630000,"modifyDate":1555460529000,"htGuid":"b6c4374b-5c57-44e3-960c-2d67bacc2251","zdGuid":null,"xmMc":"XXX园经济适用住宅小区","gyFs":1,"xzqDm":"431000000","xzqMc":null,"xmXh":58,"htBh":"(2009)FWX号","dzBaBh":null,"tzztXz":null,"hyFl":null,"tdJb":null,"zdBh":null,"tdZl":null,"gdZmj":6.2468,"gyMj":null,"xzMj":null,"tdYt":"07","crNx":null,"je":null,"gdzcTze":null,"tzQd":null,"ztJzXz":null,"fsJzXz":null,"jzMj":null,"qtTdYq":null,"jdSj":null,"dgSj":1163779200000,"jgSj":1198944000000,"qdRq":1162915200000,"pzWh":null,"pzRq":null,"pzJg":null,"kftzZe":null,"clXzcrMj":null,"clGbxzcrMj":null,"clQtMj":null,"gyWldMj":null,"clCrMj":null,"pcCrMj":null,"clMj":null,"clXq":null,"kflyBz":1,"wkflyYy":null,"qySsLx":null,"srr":null,"cjgsZdGuid":null,"gyggZdGuid":null,"zfXx":null,"wggzdSm":null,"wgszdSm":null,"minRjl":null,"maxRjl":null,"minLhl":null,"maxLhl":null,"minJzMd":null,"maxJzMd":null,"minJzXg":null,"maxJzXg":null,"minRjlTag":null,"maxRjlTag":null,"minJzMdTag":null,"maxJzMdTag":null,"minLhlTag":null,"maxLhlTag":null,"minJzXgTag":null,"maxJzXgTag":null,"sfBcHt":null,"jiafang":null,"yifang":"郴州市城市建设综合开发实业总公司","oldHtGuid":null,"haveBah":null,"bahWjmc":null,"bahWh":null,"bahBdjkbz":null,"bz":null,"gjbgBah":null,"wlBz":"0","zjggMj":null,"gkfqdjxMj":null,"wlydjxMj":null,"cyzcWh":null,"cyzcGuid":null,"wCyzcSm":null,"gyggZdbh":null,"cjgsZdbh":null,"isXcy":null,"xcyxyt":null,"kfqGuid":null,"kfqName":null,"daBh":null,"xzqName":null,"htLx":1},{"xmZt":"211","sbZt":null,"sbr":null,"xmCj":0,"createDate":1261621391000,"createUser":"郴州市国土资源局","deleteDate":null,"sbSj":1261639630000,"modifyDate":1555460529000,"htGuid":"2222222","zdGuid":null,"xmMc":"XXX园经济适用住宅小区","gyFs":1,"xzqDm":"431000000","xzqMc":null,"xmXh":58,"htBh":"(2006)026号","dzBaBh":null,"tzztXz":null,"hyFl":null,"tdJb":null,"zdBh":null,"tdZl":null,"gdZmj":6.2468,"gyMj":null,"xzMj":null,"tdYt":"07","crNx":null,"je":null,"gdzcTze":null,"tzQd":null,"ztJzXz":null,"fsJzXz":null,"jzMj":null,"qtTdYq":null,"jdSj":null,"dgSj":1163779200000,"jgSj":1198944000000,"qdRq":1162915200000,"pzWh":null,"pzRq":null,"pzJg":null,"kftzZe":null,"clXzcrMj":null,"clGbxzcrMj":null,"clQtMj":null,"gyWldMj":null,"clCrMj":null,"pcCrMj":null,"clMj":null,"clXq":null,"kflyBz":1,"wkflyYy":null,"qySsLx":null,"srr":null,"cjgsZdGuid":null,"gyggZdGuid":null,"zfXx":null,"wggzdSm":null,"wgszdSm":null,"minRjl":null,"maxRjl":null,"minLhl":null,"maxLhl":null,"minJzMd":null,"maxJzMd":null,"minJzXg":null,"maxJzXg":null,"minRjlTag":null,"maxRjlTag":null,"minJzMdTag":null,"maxJzMdTag":null,"minLhlTag":null,"maxLhlTag":null,"minJzXgTag":null,"maxJzXgTag":null,"sfBcHt":null,"jiafang":null,"yifang":"郴州市城市建设综合开发实业总公司","oldHtGuid":null,"haveBah":null,"bahWjmc":null,"bahWh":null,"bahBdjkbz":null,"bz":null,"gjbgBah":null,"wlBz":"0","zjggMj":null,"gkfqdjxMj":null,"wlydjxMj":null,"cyzcWh":null,"cyzcGuid":null,"wCyzcSm":null,"gyggZdbh":null,"cjgsZdbh":null,"isXcy":null,"xcyxyt":null,"kfqGuid":null,"kfqName":null,"daBh":null,"xzqName":null,"htLx":1},{"xmZt":"211","sbZt":null,"sbr":null,"xmCj":0,"createDate":1261621391000,"createUser":"郴州市国土资源局","deleteDate":null,"sbSj":1261639630000,"modifyDate":1555460529000,"htGuid":"2222222","zdGuid":null,"xmMc":"XXX园经济适用住宅小区","gyFs":1,"xzqDm":"431000000","xzqMc":null,"xmXh":58,"htBh":"(2006)026号","dzBaBh":null,"tzztXz":null,"hyFl":null,"tdJb":null,"zdBh":null,"tdZl":null,"gdZmj":6.2468,"gyMj":null,"xzMj":null,"tdYt":"07","crNx":null,"je":null,"gdzcTze":null,"tzQd":null,"ztJzXz":null,"fsJzXz":null,"jzMj":null,"qtTdYq":null,"jdSj":null,"dgSj":1163779200000,"jgSj":1198944000000,"qdRq":1162915200000,"pzWh":null,"pzRq":null,"pzJg":null,"kftzZe":null,"clXzcrMj":null,"clGbxzcrMj":null,"clQtMj":null,"gyWldMj":null,"clCrMj":null,"pcCrMj":null,"clMj":null,"clXq":null,"kflyBz":1,"wkflyYy":null,"qySsLx":null,"srr":null,"cjgsZdGuid":null,"gyggZdGuid":null,"zfXx":null,"wggzdSm":null,"wgszdSm":null,"minRjl":null,"maxRjl":null,"minLhl":null,"maxLhl":null,"minJzMd":null,"maxJzMd":null,"minJzXg":null,"maxJzXg":null,"minRjlTag":null,"maxRjlTag":null,"minJzMdTag":null,"maxJzMdTag":null,"minLhlTag":null,"maxLhlTag":null,"minJzXgTag":null,"maxJzXgTag":null,"sfBcHt":null,"jiafang":null,"yifang":"郴州市城市建设综合开发实业总公司","oldHtGuid":null,"haveBah":null,"bahWjmc":null,"bahWh":null,"bahBdjkbz":null,"bz":null,"gjbgBah":null,"wlBz":"0","zjggMj":null,"gkfqdjxMj":null,"wlydjxMj":null,"cyzcWh":null,"cyzcGuid":null,"wCyzcSm":null,"gyggZdbh":null,"cjgsZdbh":null,"isXcy":null,"xcyxyt":null,"kfqGuid":null,"kfqName":null,"daBh":null,"xzqName":null,"htLx":1}]

1、需求通过返回的数据中，如果key相同则将行合并！

2、效果图如下

3、重新封装的数据结构

前端代码

...... 
<tr class="blti">
        <td>合同编号</td>
        <td>签订日期</td>
        <td>土地面积（公顷）</td>
        <td>土地用途</td>
        <td>合同价款（万元）</td>
        <td colspan="2">规划建筑面积（平方米）</td>
    </tr>
    <ng-container *ngFor="let datas of dataSet">
        <td [rowSpan]="datas.rowspan+1">{{datas.htxzGuid}}</td>
        <tr *ngFor="let tdGdxm of datas.tdGdxm">
            <td>{{tdGdxm.qdRq | date:'yyyy-MM-dd'}}</td>
            <td>{{tdGdxm.gdZmj}}</td>
            <td>{{tdGdxm.tdYt}}</td>
            <td>{{tdGdxm.jzMj}}</td>
            <td colspan="2"></td>
        </tr>
    </ng-container>
......

dataSet: any[] = [];
  
  /**
   * 动态表单合并单元格数据
   * @param data 原数据
   * @return this.dataSet 页面数据
   */
  colOrowSpan(data: Array<TdGdxm>) {
    // @ts-ignore 去重主键
    let distinctKey: any[] = _.uniqWith(data, _.isEqual);

    distinctKey.forEach((t: TdGdxm, i: number) => {
      let dataSetOne = { htxzGuid: null, tdGdxm: [], rowspan: null };

      // 获取同key的数据，重新封装
      let keyList = data.filter(d => d.htxzGuid === t.htxzGuid);
      if (keyList != null) {
        dataSetOne.htxzGuid = t.htxzGuid;
        // 相同key的数据重新封装
        keyList.forEach(keySameOne => {
          delete keySameOne.htxzGuid;
          dataSetOne.tdGdxm.push(keySameOne);
        });
        dataSetOne.rowspan = keyList.length;
      }
      this.dataSet.push(dataSetOne);
    });
  }