javascript - 如何在 Angular 6 中的表的单独列中显示多行值的总计？

Question

我正在使用 Angular 6 和 html 表。我已在表中显示了 json 列表数据。我想在单独的栏(“教师总数”)中显示教师明智的项目申请人总数，但我无法做到这一点。请指导我解决这个问题。

我想这样做:

StackBlitz Link

我的 ts 文件:

 admitList = [
        {
            facultyName: 'FSIT',
            programName: 'BSc in CSE',
            programTotalApplicant: 10
        },
        {
            facultyName: 'FSIT',
            programName: 'BSc in SWE',
            programTotalApplicant: 5
        },
        {
            facultyName: 'FSIT',
            programName: 'BSc in EEE',
            programTotalApplicant: 15
        },
        {
            facultyName: 'FAHS',
            programName: 'BSc in LLB',
            programTotalApplicant: 10
        },
        {
            facultyName: 'FAHS',
            programName: 'BSc in English',
            programTotalApplicant: 5
        },
        {
            facultyName: 'FAHS',
            programName: 'BSc in Pharmacy',
            programTotalApplicant: 8
        }
    ];


  constructor() { }

  ngOnInit() { }

我的html文件:

 <table class="table table-bordered">
    <thead>
    <tr>
        <th>Faculty</th>
        <th>Program</th>
        <th>Program Total Applicant</th>
        <th>Faculty Total</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let admit of admitList">
        <td>{{admit.facultyName}}</td>
        <td>{{admit.programName}}</td>
        <td>{{admit.programTotalApplicant}}</td>
    </tr>
    </tbody>
</table>

Answer 1

这是一个完整的工作解决方案:WORKING STACKBLITZ DEMO

组件.ts

  groupedFaculty;

  ngOnInit() {
     this.groupedFaculty = this.groupBy(this.admitList, 'shortName');
  }

  groupBy(objectArray, property) {
    return objectArray.reduce(function (acc, obj) {
      var key = obj[property];
    if (!acc[key]) {
      acc[key] =  { count: 1, aggregation: obj.totalApplicant };
    } else {
      let count = acc[key].count + 1;
      let aggregation = acc[key].aggregation += obj.totalApplicant;
      acc[key] =  { count: count, aggregation: aggregation } ;
    }
    return acc;
   }, {});
  }

组件.html

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Faculty</th>
            <th>Program</th>
            <th>Total Applicant</th>
            <th>Faculty Total</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let admit of admitList; let i = index ">
            <td>{{admit.shortName}}</td>
            <td>{{admit.programName}}</td>
            <td>{{admit.totalApplicant}}</td>
            <td *ngIf="(admitList[i-1]?.shortName != admitList[i]?.shortName) || (i == 0)" [attr.rowspan]="this.groupedFaculty[admitList[i]?.shortName].count">
        {{this.groupedFaculty[admitList[i]?.shortName]?.aggregation}}
      </td>
        </tr>
    </tbody>
</table>