Vous souhaitez ajouter des valeurs dans une colonne spécifique dans ngFor

Question

Dans mon projet angulaire, l'utilisateur peut sélectionner un employé à partir d'une zone de liste déroulante. Ensuite, en utilisant un ngFor, les données provenant uniquement de cet utilisateur sont affichées dans une table. Une des colonnes est heures et dans le pied de tableau, je veux pouvoir additionner le nombre d'heures que chaque employé a pour chacun des types sélectionnés. Ci-dessous la fonction que j'ai essayée, mais elle permet d'obtenir le nombre total d'heures pour tous les employés. Comment est-ce que je filtrerais pour que ce soit seulement pour l'employé choisi?

Voilà ma fonction:

getTotalPtoRequests() { 
    for (let i = 0; i < this.ptoData.length; i++) { 
     if (this.ptoData[i].hours) { 
      this.totalPtoRequests += this.ptoData[i].hours; 
     } 
    } 
    return this.totalPtoRequests; 
} 

et est là où il est appelé:

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

ici sont mes pleins .ts et fichiers .html pour référence:

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>

Mise à jour avec le code pour sélectionner l'employé:

 <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

J'ai ajouté une fonction updateTotals à ma fonction get qui ressemblait à ceci:

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

puis également ajouté à ngOnChanges à surveiller lorsque les changements sociaux sélectionnés qui ressemble à ceci:

ngOnChanges(changes: { [propKey: string]: SimpleChange }) { 
    for (let propName in changes) { 
     if (propName == "selectedEmployee") { 
      this.updateTotals(); 
     } 
    } 
} 

Answer 2

pourrait vous regrouper les heures lorsqu'un utilisateur est sélectionné, puis stocker cette valeur dans totalPTORequests et la sortie au format html

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

alors chaque fois qu'un nouvel utilisateur est sélectionné cette fonction d'agrégation est exécuté à nouveau -> valeur totalPTORequests est mis à jour -> votre pied de table est mis à jour