根據另一個數組過濾出一個數組

在我的Angular程序中，我試圖根據另一個數組過濾一個數組。我只想顯示陣列中type屬性值爲etoEarned的人的姓名（來自empInfo陣列）。 empInfo數組是列出所有員工及其員工詳細信息，ptoData數組是所有人都已起飛的所有日期的列表。兩個陣列中都有一個EmpKey字段，表示哪個員工休假。現在，它顯示每個人，只爲那些擁有它們的人填寫值，如下所示：根據另一個數組過濾出一個數組

如何消除沒有任何分配小時數的名稱？

這裏的功能，我的按鈕呼叫：

setValues(): void { 
 
     this.datePTO = this.ptoData.filter(pto => pto.date > this.StartDate && pto.date < this.EndDate); 
 
     this.etoEarned = this.datePTO.filter(pto => pto.type === 'etoEarned'); 
 
     
 
     setTimeout(() => { this.printMonthlyReport() }, 2000); 
 
    } 
 

 
    printMonthlyReport(): void { 
 

 
     let printContents, printAdjContents, popupWin, popupWinAdj; 
 
     printAdjContents = document.getElementById('print-monthly-eto-report').innerHTML; 
 
     popupWinAdj = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto'); 
 
     popupWinAdj.document.open(); 
 
     popupWinAdj.document.write(` 
 
      <html> 
 
      <head> 
 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
       <title>Monthly Adjusted Report</title> 
 
      </head> 
 
      <body> 
 
       ${printAdjContents} 
 
      </body> 
 
      </html>` 
 
     ); 
 
    }

，這裏是我的html：

<div id="print-monthly-eto-report" style="border: none; display: none;"> 
 

 
     <div class="panel-body col-sm-12" *ngFor="let emp of empInfo"> 
 
     <div *ngIf="empHasEto(emp)> 
 
      <table class="table"> 
 
      <thead> 
 
       <tr> 
 
       <td colspan="4" style="font-weight: bold;">Employee: {{emp.FirstName}} {{emp.LastName}}</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Date</td> 
 
       <td>Hours</td> 
 
       <td>Scheduled</td> 
 
       <td>Notes</td> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <ng-container *ngFor="let eto of etoEarned"> 
 
        <tr *ngIf="eto.EmpKey === emp.EmpKey"> 
 
         <td>{{eto.date | date: 'MM/dd/yyyy'}}</td> 
 
         <td>{{eto.hours}}</td> 
 
         <td>{{eto.scheduled}}</td> 
 
         <td>{{eto.notes}}</td> 
 
        </tr> 
 
        </ng-container> 
 
      </tbody> 
 
      <tfoot> 
 
       <tr> 
 
       <td colspan="4"><span style="font-weight:500;">Total ETO Hours Earned: {{emp.ETOEarned}}</span></td> 
 
       </tr> 
 

 
      </tfoot> 
 
      </table> 
 
     </div> 
 
     </div> 
 
     </div>

編輯 - 我已經添加了一個函數（感謝@LarsMontanaro），它已經修復了顯示每個人的姓名的問題，但仍爲每個人留下空間。我假設問題是我的HTML，因爲我有let emp of empInfo之前*ngIf="empHasEto(emp)所以它仍然會通過每個人，但只顯示錶返回true的人。我如何解決這個問題以消除空白？（僅供參考這裏是什麼樣子）：

而且，這裏是我的新功能（我已經更新了.html以上）：

empHasEto(emp: EmpInfo) { 
 
     this.datePTO = this.ptoData.filter(pto => pto.date > this.StartDate && pto.date < this.EndDate); 
 
     this.etoEarned = this.datePTO.filter(pto => pto.type === 'etoEarned'); 
 

 
     if (this.empInfo && this.etoEarned) { 
 
      for (let eto of this.etoEarned) { 
 
       if (eto.EmpKey == emp.EmpKey) { 
 
        return true; 
 
       } 
 
      } 
 
     } 
 
    }

來源

2017-07-19 asdf

編輯：這樣做的更好方法是使用管道來過濾正在迭代的數組。

你可以像這樣創建一個自定義管道：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'filterEmployeesByEto' 
}) 
export class FilterEmployeesByEtoPipe implements PipeTransform { 
    transform(empArray : Array<any>, etoArray : Array<any>): Array<any> { 
     if (empArray && etoArray) { 
      return empArray.filter((emp) => { 
       for (let eto of etoArray) { 
        if (eto.EmpKey === emp.EmpKey) { 
         return true; 
        } 
       } 
      } 
     } 
    } 
}

，然後打電話給你管中含有* ngFor像這樣的HTML行：

<div class="panel-body col-sm-12" *ngFor="let emp of empInfo | filterEmployeesByEto : etoEarned">

您必須註冊您的管在你的app-module.ts中。

一個SO帖子裏面解釋了這個確切的過程中更多的細節在這裏：How to apply filters to *ngFor

而且你可以閱讀角自管的位置：https://angular.io/guide/pipes#custom-pipes

來源

2017-07-19 18:46:39 LarsMonty

這個遊戲能幫助（在OP見更新），但它仍然顯示來自員工的空間 – asdf

啊，當然我有更好的解決方案。你需要使用管道！給我幾分鐘，我會編輯我的答案。 – LarsMonty

工作很好！我甚至沒有想過使用管道，謝謝！ – asdf

根據另一個數組過濾出一個數組

回答

相關問題