想要在 ngFor 的特定列中添加值

Question

在我的 angular 项目中，用户可以 select 来自组合框的员工。然后，使用 ngFor，仅来自该用户的数据显示在 table 中。其中一列是小时数，在 table 页脚中，我希望能够将每位员工在每种 selected 类型中的小时数相加。下面是我尝试过的功能，但它只是获取所有员工的总小时数。我如何将其过滤掉以便仅供 selected 员工使用？

这是我的函数：

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>

更新 select 员工的代码：

      <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>

Answer 1

您能否汇总选择用户时的小时数，然后将该值存储在 totalPTORequests 中并输出到 html

<span class="requestText">PTO Requests: {{totalPTORequests}} hours / {{totalPTORequests/8}} day(s)</span>

然后每次选择新用户时聚合函数再次为运行 -> totalPTORequests 值已更新 -> 您的 table 页脚已更新

Answer 2

我在 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();
        }
    }
}

想要在 ngFor 的特定列中添加值

Want to add up values in specific column in ngFor

ngfor

angular