根据另一个数组过滤出一个数组

在我的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

根据另一个数组过滤出一个数组

回答

相关问题