Как исправить диапазон строк таблицы HTML в Angular 6?

Question

У меня проблема с динамическим изменением строки таблицы. Я пытался, но это не работает должным образом.

У меня есть массив JSON. Я связал стол с угловым 6 для петли. Я хочу показать факультет, MC учебного кампуса, ПК учебного кампуса и заголовок Total с диапазоном строк. Я пытался показать учебный кампус MC, Study Campus PC и Total так, как я хочу, но в правой части столбца отображаются некоторые ненужные строки.

Моя таблица вывода:

Я хочу использовать эту таблицу так:

ссылка на стек

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