角度 - テーブルの特定の行に* ngIfを使って* ngIfを使用する

Question

私はAngularには新しく、テーブルからアイテムをフィルタリングするパイプを作ろうとしています。私はEmpKey = empInfo [selectedEmployee] .EmpKeyのテーブルフィールドのみを表示しようとしています。どんな助けでも大歓迎です！前もって感謝します！

ここに私の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>

だとここで私の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; 
 
    } 
 
}

おかげAGAですに！

明確化のための編集 - ユーザは、選択された従業員のインデックスを私に与えるドロップダウンリストから従業員を選択します。 empInfo [selectedEmployee] .EmpKeyの値を使用して、そのEmpKeyを含まない結果を除外したいと考えています。この表には、多くの異なるEmpKeysがあり、ユーザーが選択されるたびに、そのEmpKeyを共有するフィールドのみが印刷され、別のEmployeeが選択されるたびに別の従業員に変更されます。

Answer 1

あなたはそのためのディレクティブを作成する必要はありません。

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

condition場合は今の行にのみ表示されます。

---

だからあなたのコードは、現時点では1人の従業員を選択し、上記のコード

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