Angular-对表中的特定行使用* ngIf和* ngFor

Question

I'm pretty new to Angular and I'm trying to make a pipe to filter items out of my table and am not quite sure how to go about that. I'm trying to only display the table fields where the EmpKey = empInfo[selectedEmployee].EmpKey. Any help would be greatly appreciated! Thanks in advance!

Here's my tracker.component.html

 <div class="row"> <div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}"> <button class="form-control" style="width:150px;" (click)="toggleSummary()">Open Summary</button> <select id="empName" [(ngModel)]="selectedEmployee"> <option selected="selected" disabled>Employee Name...</option> <option *ngFor="let emp of empInfo; let i = index" [ngValue]="i">{{i}} - {{emp.EmpID}}</option> </select> <select id="PTOtype"> <option selected="selected" disabled>Type of PTO...</option> <option value="PTO">PTO</option> <option value="ETO-Earned">ETO - Earned</option> <option value="ETO-Used">ETO - Used</option> <option value="STDLTD">STD/LTD</option> <option value="Uncharged">Uncharged</option> </select> <button class="form-control" style="width: 150px;" (click)="nextEmployee()">Next</button> <button class="form-control" style="width: 150px;" (click)="previousEmployee()">Previous</button> <h2 *ngIf="empInfo && empInfo.length > selectedEmployee">{{empInfo[selectedEmployee].FirstName}} {{empInfo[selectedEmployee].EmpKey}}</h2> <table class="table"> <thead> <tr> <th>Date</th> <th>Full/Half</th> <th>Hours</th> <th>Scheduled?</th> <th>Notes</th> <th>In P/R?</th> </tr> </thead> <tbody> <tr *ngFor="let pto of ptoData> <td>{{pto.date | date: 'MM/dd/y'}}</td> <td>{{pto.EmpKey}}</td> <td>{{pto.fullhalf}}</td> <td>{{pto.hours}}</td> <td>{{pto.scheduled}}</td> <td>{{pto.notes}}</td> <td>{{pto.inPR}}</td> </tr> </tbody> </table> </div> <div *ngIf="isHidden" class="col-xs-5"> <pto-summary [selectedEmployee]="selectedEmployee"></pto-summary> </div> </div> 

and here's my tracker.component.ts

 import { Component, OnInit, Input } 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'; @Component({ selector: 'pto-tracker', templateUrl: `./tracker.component.html`, styleUrls: ['./tracker.component.css'] }) export class TrackerComponent implements OnInit{ empInfo: EmpInfo[]; ptoData: PTOData[]; isHidden: boolean = false; public selectedEmployee: number; constructor( private empInfoService: EmpInfoService, private ptoDataService: PTODataService) { } getEmpInfo(): void { this.empInfoService.getEmpInfos().then( empInfo => this.empInfo = empInfo ); } getPTOData(): void { this.ptoDataService.getPTODatas().then( ptoData => this.ptoData = ptoData ); } ngOnInit(): void { this.getEmpInfo(); this.getPTOData(); } toggleSummary(): void { this.isHidden = !this.isHidden; } nextEmployee(): void { this.selectedEmployee = this.selectedEmployee+1; } previousEmployee(): void { this.selectedEmployee = this.selectedEmployee-1; } } 

Thanks again!

EDIT for Clarification - The user will select an employee from a dropdown list which will give me the index of the employee that was chosen. from there, I want to filter out the results that don't contain that EmpKey by using the value from empInfo[selectedEmployee].EmpKey. In the table, there are many different EmpKeys and whenever a user is selected, I only want the fields that share that EmpKey to be printed out and change to another employees whenever a different one is selected.

Answer 1

You don't need to create a directive for that :

    <ng-container *ngFor="let pto of ptoData">
       <tr *ngIf="condition" >
          <td>{{pto.date | date: 'MM/dd/y'}}</td>
          ...
       </tr>
    </ng-container>

Now a row will only display if condition .

---

So your code becomes

    <ng-container *ngFor="let pto of ptoData">
       <tr *ngIf="pto.EmpKey === empInfo[selectedEmployee].EmpKey" >
          <td>{{pto.date | date: 'MM/dd/y'}}</td>
          ...
       </tr>
    </ng-container>