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

Question

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

我有一个数组 json。我已经用 angular 6 for 循环绑定了一个表。我想显示 Faculty、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