在我的角度项目中，用户可以从组合框中选择一名员工。然后，使用ngFor，仅来自该用户的数据显示在表格中。其中一列是小时，在表格页脚中，我希望能够计算每个员工对每个所选类型的小时数。以下是我尝试过的功能，但它只能获得所有员工的总工作时间。我该如何过滤它以便它只适用于选定的员工？
这是我的功能：
getTotalPtoRequests() {
for (let i = 0; i < this.ptoData.length; i++) {
if (this.ptoData[i].hours) {
this.totalPtoRequests += this.ptoData[i].hours;
}
}
return this.totalPtoRequests;
}
以及它所在的地方：
<span class="requestText">PTO Requests: {{getTotalPtoRequests()}} hours / {{getTotalPtoRequests()/8}} day(s)</span>
这是我的完整.ts和.html文件供参考：
import { Component, OnInit, EventEmitter, Input, Output, Pipe } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PTODataService } from './pto-data.service';
import { PTOData } from './pto-data';
import { EmpInfoService } from './emp-info.service';
import { EmpInfo } from './emp-info';
import { TrackerComponent } from './tracker.component';
@Component({
selector: 'pto-grid',
templateUrl: `./grid.component.html`,
styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit {
empInfo: EmpInfo[];
ptoData: PTOData[];
newRow: PTOData = new PTOData();
totalPtoRequests: number = 0;
totalEtoRequests: number = 0;
@Input() selectedEmployee: number;
@Input() selectedType: string;
@Output() notify = new EventEmitter<number>();
rowSelected: number;
constructor(
private empInfoService: EmpInfoService,
private ptoDataService: PTODataService) { }
getEmpInfo(): void {
this.empInfoService.getEmpInfos().then(
empInfo => {
this.empInfo = empInfo.sort((a, b) =>
a.LastName < b.LastName ? -1 : b.LastName < a.LastName ? 1 : 0);
});
}
getPTOData(): void {
this.ptoDataService.getPTODatas().then(
ptoData => {
this.ptoData = ptoData.sort((a, b) =>
a.date < b.date ? -1 : b.date < a.date ? 1 : 0);
});
}
nextEmployee(): void {
this.selectedEmployee = this.selectedEmployee + 1;
this.notify.emit(this.selectedEmployee);
}
previousEmployee(): void {
this.selectedEmployee = this.selectedEmployee - 1;
this.notify.emit(this.selectedEmployee);
}
firstEmployee(): void {
this.selectedEmployee = 0;
this.notify.emit(this.selectedEmployee);
}
lastEmployee(): void {
this.selectedEmployee = this.empInfo.length - 1;
this.notify.emit(this.selectedEmployee);
}
getTotalPtoRequests() {
for (let i = 0; i < this.ptoData.length; i++) {
if (this.ptoData[i].hours) {
this.totalPtoRequests += this.ptoData[i].hours;
}
}
return this.totalPtoRequests;
}
}
<table class="table table-striped table-bordered" *ngIf="empInfo && empInfo.length > selectedEmployee">
<thead>
<tr>
<th>Date</th>
<th>Full/Half</th>
<th>Hours</th>
<th>Scheduled?</th>
<th>Notes</th>
<th>In P/R?</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="7">
<span class="requestText">PTO Requests: {{getTotalPtoRequests()}} hours / {{getTotalPtoRequests()/8}} day(s)</span>
<span class="requestText"> | </span>
<span class="requestText">ETO Requests: {{empInfo[selectedEmployee].ETORequests}} hours / {{empInfo[selectedEmployee].ETORequests/8}} day(s)</span>
<button class="btn btn-default btn-primary btn-bargin" style="float: right;" (click)="lastEmployee()"><i class="fa fa-step-forward fa-lrg" aria-hidden="true"></i></button>
<button [disabled]="!isPreviousValid()" class="btn btn-default btn-primary btn-margin" style="float:right;" (click)="nextEmployee()"><i class="fa fa-play fa-lrg" aria-hidden="true"></i></button>
<div class="footertext">{{selectedEmployee+1}} of {{empInfo.length}}</div>
<button [disabled]="!isNextValid()" class="btn btn-default btn-primary btn-margin" style="float: right;" (click)="previousEmployee()"><i class="fa fa-play fa-flip-horizontal fa-lrg" aria-hidden="true"></i></button>
<button class="btn btn-default btn-primary btn-margin" style="float: right;" (click)="firstEmployee()"><i class="fa fa-step-backward fa-lrg" aria-hidden="true"></i></button>
</td>
</tr>
</tfoot>
<tbody>
<ng-container *ngFor="let pto of (ptoData | currentEmployee:empInfo[selectedEmployee].EmpKey); let i = index">
<ng-container [ngSwitch]="isRowSelected(i)">
<ng-container *ngSwitchCase="false">
<ng-container *ngIf="pto.type === selectedType">
<tr pto-row-display [pto]="pto" (click)="selectRow(i)"></tr>
</ng-container>
</ng-container>
<ng-container *ngSwitchCase="true">
<tr pto-row-edit [pto]="pto" [rowSelected]="rowSelected" (onSave)="onSave($event)" (onDelete)="onDelete($event)" *ngIf="pto.type === selectedType"></tr>
</ng-container>
</ng-container>
</ng-container>
</tbody>
</table>
使用代码选择员工进行更新：
<div class="col-xs-3">
<select class="form-control" id="empName" [(ngModel)]="selectedEmployee">
<option selected="selected" disabled>Employee Name...</option>
<option *ngFor="let emp of empInfo; let i = index" [ngValue]="i">{{emp.EmpID}} - {{emp.FirstName}} {{emp.LastName}}</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" id="PTOtype" [(ngModel)]="selectedType">
<option selected="selected" value="PTO">PTO</option>
<option value="etoEarned">ETO - Earned</option>
<option value="etoUsed">ETO - Used</option>
<option value="STDLTD">STD/LTD</option>
<option value="Uncharged">Uncharged</option>
</select>
</div>
</div>
<div class="col-xs-12">
<pto-grid [selectedType]="selectedType" [selectedEmployee]="selectedEmployee" (notify)="onNotify($event)"></pto-grid>
</div>
答案 0 :(得分：0)
你可以聚合选择用户的小时数，然后将该值存储在totalPTORequests并输出到html
<span class="requestText">PTO Requests: {{totalPTORequests}} hours / {{totalPTORequests/8}} day(s)</span>
然后每次选择新用户时再次运行聚合函数 - ＆gt; totalPTORequests值已更新 - ＆gt;您的表页脚已更新
答案 1 :(得分：0)
我在我的get函数中添加了updateTotals函数，如下所示：
updateTotals() {
if (this.empInfo) {
this.totalPtoRequests = 0;
this.totalEtoRequests = 0;
let temp = this.ptoData.filter(p => p.EmpKey == this.empInfo[this.selectedEmployee].EmpKey);
for (let i = 0; i < temp.length; i++) {
if (temp[i].type == 'PTO') {
this.totalPtoRequests += temp[i].hours;
} else if (temp[i].type == 'etoUsed') {
this.totalEtoRequests += temp[i].hours;
}
}
}
}
然后还在ngOnChanges中添加以查看所选员工的更改时间如下所示：
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
for (let propName in changes) {
if (propName == "selectedEmployee") {
this.updateTotals();
}
}
}