如何在角度 6 中显示多个行值的总数以分隔表格的列？
Posted
技术标签:
【中文标题】如何在角度 6 中显示多个行值的总数以分隔表格的列？【英文标题】：How to Show total of multiple row values in to separate column of the table in angular 6? 【发布时间】：2019-09-03 20:40:34 【问题描述】：我正在使用 Angular 6 和 html 表。我已经在表格中显示了一个 json 列表数据。我想在单独的列（'Faculty Total'）中显示教师明智的总计划申请人，但我无法做到这一点。请指导我解决这个问题。
我想这样做：
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>
【问题讨论】：
【参考方案1】：这是一个完整的工作解决方案：WORKING STACKBLITZ DEMO
component.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;
, );
component.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>
【讨论】：
感谢您的合作。我找到了明智的总申请人，但如何在表格中显示到另一列 哇哦！！它的工作。多谢。你节省了我很多时间。【参考方案2】：首先创建一个按shortname分组的数组并计算总数，然后根据条件添加rowspan属性。
// 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="i==0 || admit.shortName !== admitList[i-1].shortName" [attr.rowspan] = "(groupbyShortName[admit.shortName].count) ? groupbyShortName[admit.shortName].count : 0">groupbyShortName[admit.shortName].sum</td>
</tr>
</tbody>
</table>
// 组件代码
import Component, OnInit from '@angular/core';
@Component(
selector: 'ngbd-datepicker-popup',
templateUrl: './datepicker-popup.html'
)
export class NgbdDatepickerPopup implements OnInit
groupbyShortName = ;
admitList = [
shortName: 'FSIT',
programName: 'BSc in CSE',
totalApplicant: 10
,
shortName: 'FSIT',
programName: 'BSc in SWE',
totalApplicant: 5
,
shortName: 'FSIT',
programName: 'BSc in EEE',
totalApplicant: 15
,
shortName: 'FAHS',
programName: 'BSc in LLB',
totalApplicant: 10
,
shortName: 'FAHS',
programName: 'BSc in English',
totalApplicant: 5
,
shortName: 'FAHS',
programName: 'BSc in Pharmacy',
totalApplicant: 8
];
constructor()
this.groupbyShortName = this.admitList.reduce((accu, shortName, totalApplicant, programName) =>
if(!accu[shortName])
accu[shortName] = count: 0, sum: 0, shortName, totalApplicant, programName;
accu[shortName].count += 1;
accu[shortName].sum += totalApplicant;
return accu;
, );
ngOnInit()
【讨论】：
【参考方案3】：最简单的解决方案是在分组的行中找到您当前项目的索引：
stackblitz
import Component, OnInit from '@angular/core';
@Component(
selector: 'ngbd-datepicker-popup',
templateUrl: './datepicker-popup.html'
)
export class NgbdDatepickerPopup implements OnInit
constructor()
ngOnInit()
rowspanBy(key: string)
return this.admitList.filter(ad => ad.shortName === key).length;
byIndex(admit: any)
const p1 = this.admitList.filter(ad => ad.shortName === admit.shortName);
return p1.indexOf(admit) === 0;
admitList = [
shortName: 'FSIT',
programName: 'BSc in CSE',
totalApplicant: 10
,
shortName: 'FSIT',
programName: 'BSc in SWE',
totalApplicant: 5
,
shortName: 'FSIT',
programName: 'BSc in EEE',
totalApplicant: 15
,
shortName: 'FAHS',
programName: 'BSc in LLB',
totalApplicant: 10
,
shortName: 'FAHS',
programName: 'BSc in English',
totalApplicant: 5
,
shortName: 'FAHS',
programName: 'BSc in Pharmacy',
totalApplicant: 8
];
<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;">
<td>admit.shortName</td>
<td>admit.programName</td>
<td>admit.totalApplicant</td>
<td
[attr.rowspan]="rowspanBy(admit.shortName)"
*ngIf="byIndex(admit)"
>
rowspanBy(admit.shortName)
</td>
</tr>
</tbody>
</table>
一切顺利
【讨论】：
不错的解决方案。我确定它可以工作，但不是一般建议不要在 html 视图中使用函数吗？诸如干净/不可变/始终一致的视图状态之类的东西。在这种情况下，我认为没有问题。但通常用于变更检测。 你是对的，但总的来说，我更喜欢避免用长语句填充模板，preferrig getter，推送策略和 ngxs 状态管理器，一切顺利;) 我们同意，对于解决某人的家庭作业任务，这将是矫枉过正:)以上是关于如何在角度 6 中显示多个行值的总数以分隔表格的列？的主要内容，如果未能解决你的问题，请参考以下文章