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

Question

我正面临一个动态表行跨度的问题。我试过了，但它不能正常工作。

我有一个数组json。我用angular 6 for循环绑定了一个表。我想要显示学院，研究校园MC，研究校园PC和总行跨度标题。我尝试按照自己的意愿显示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>

在这里CHeck it：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