如何在Angular 6中修复html表行跨度？

Question

我正动态遇到表行跨度的问题。我已经尝试过，但是无法正常工作。

我有一个数组json。我已经绑定了一个角度为6的循环表。我想显示教师，Study Campus MC，Study Campus PC和具有行跨度的Total标头。我尝试根据需要显示Study Campus MC，Study Campus PC和Total，但在列的右侧显示了一些不必要的行。

我的输出表：

我想要这张桌子：

stackblitz link

Answer 1

为了存档，我建议您像这样更改json对象格式。

testJson = [
    {
        "shortName": "FHSS",
        "children": [
            {
                "physicallyApply": 1,
                "onlineApply": 0,
                "semesterName": "Summer",
                "semesterYear": 2020,
                "programName": "B.A. in English",
                "studyCampus": "Main Campus",
                "programTotal": 1
            },
            {
                "physicallyApply": 0,
                "onlineApply": 7,
                "semesterName": "Summer",
                "semesterYear": 2020,
                "programName": "B.A. in English",
                "studyCampus": "Permanent Campus",
                "programTotal": 7
            }
        ]
    },
    {
        "shortName": "FSIT",
        "children": [
            {
                "physicallyApply": 1,
                "onlineApply": 2,
                "semesterName": "Summer",
                "semesterYear": 2020,
                "programName": "B. Sc. in Multimedia and Creative Technology",
                "studyCampus": "Main Campus",
                "programTotal": 3
            }
        ]
    }
];

然后您必须像这样更改HTML。

<table border="1">
    <thead>
      <tr>
        <th>Faculty</th>
        <th>Program</th>
        <th>Physically Apply</th>
        <th>Online Apply</th>
        <th>Program Total</th>
        <th>Study Campus MC</th>
        <th>Study Campus PC</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of testJson; let i = index">

        <tr *ngFor="let child of item.children; let x = index;">
          <td >{{x == 0 ? item.shortName : null}}</td>
          <td>{{child.programName}}</td>
          <td>{{child.physicallyApply}}</td>
          <td>{{child.onlineApply}}</td>
          <td>{{child.programTotal}}</td>
          <td *ngIf="x==0 && i==0" [attr.rowspan]="i">{{totalMC}}</td>
          <td *ngIf="x==0 && i==0" [attr.rowspan]="i">{{totalPC}}</td>
          <td *ngIf="x==0 && i==0" [attr.rowspan]="i">{{totalMC + totalPC}}</td>
        </tr>
  </ng-container>
    </tbody>                
 </table>

在此处查看：Stackblitz

Answer 2

您多次打印totalMC, totalPC and totalMC + totalPC（由于循环）。您必须确保，使用ngIf如下所示，它们仅会出现一次-

<tr *ngFor="let item of testJson; let i = index">
    <td>{{item.shortName}}</td>
    <td>{{item.programName}}</td>
    <td>{{item.physicallyApply}}</td>
    <td>{{item.onlineApply}}</td>
    <td>{{item.programTotal}}</td>
    <td *ngIf="i==0" [attr.rowspan]="i">{{totalMC}}</td>
    <td *ngIf="i==0" [attr.rowspan]="i">{{totalPC}}</td>
    <td *ngIf="i==0" [attr.rowspan]="i">{{totalMC + totalPC}}</td>
  </tr>

Stackblitz link