ngzorro实现表格的rowspan合并

目标效果：

 实现过程：

后端返回的数据格式如下，这种格式如果直接展示并不能实现我们需要的效果，所以需要先将数据格式进行转换。

 转换如下：

if (res.status === StatusEnum.SUCCESS) {
        this.pageList = res.datas;
        const opreatArry = [];
        if (this.pageList.length > 0) {
          this.pageList.forEach(item => {
            if (item.relations && item.relations.length > 0) {
              item.relations.forEach((subitem, index) => {
                let obj: {};
                obj = JSON.parse(JSON.stringify(item));
                obj['rowspan'.toString()] = item.relations.length;
                if (index !== 0) {
                  obj['isshow'.toString()] = false;
                } else {
                  obj['isshow'.toString()] = true;
                }
                obj['relationsId'.toString()] = subitem.id;
                obj['productName'.toString()] = subitem.productName;
                obj['select'.toString()] = subitem.select;
                opreatArry.push(obj);
              });
            }
          });
        }
        this.pageListOpreat = opreatArry;
        console.log(this.pageListOpreat)
      }

转换结果如下：

最后在页面中实现：

     <nz-table
        nzBordered
        [nzData]="pageListOpreat"
        [nzFrontPagination]="false"
        [nzShowPagination]="false"
        [nzLoadingDelay]="1"
      >
        <thead>
        <tr>
          <th nzWidth="120px">课程名称</th>
          <th>学院名称</th>
          <th>待选产品</th>
          <th nzWidth="100px">选择方式</th>
          <th nzWidth="80px">选择状态</th>
          <th nzWidth="200px">选择时间</th>
          <th nzWidth="100px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of pageListOpreat; let i = index;">
          <ng-container *ngIf="item.isshow">
            <td [rowSpan]="item.rowspan">{{item.courseName}}</td>
            <td [rowSpan]="item.rowspan">{{item.collegeName}}</td>
            <td>{{item.productName}}</td>
            <td [rowSpan]="item.rowspan">{{item.rowspan}}选{{item.productSelectNumber}} 
            </td>
            <td>{{item.select?'是':'否'}}</td>
            <td [rowSpan]="item.rowspan">{{item.selectTime?item.selectTime:'—'}}</td>
            <td [rowSpan]="item.rowspan">
              <span *ngIf="item.selectTime">-</span>
              <span *ngIf="!item.selectTime">选择产品</span>
            </td>
          </ng-container>
          <ng-container *ngIf="!item.isshow">
            <td>{{item.productName}}</td>
            <td>{{item.select?'是':'否'}}</td>
          </ng-container>
        </tr>
        </tbody>
      </nz-table>

记录。