根据另一个数组筛选出一个数组
在我的角度程序中，我试图过滤一个基于另一个数组的数组。我只想显示为empInfo数组中的type属性的值为etoEarned的人员的名称(来自ptoData数组)。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;
}
}
}
}
回答 1
Stack Overflow用户
发布于 2017-07-19 18:46:39
编辑：一种更好的方法是使用管道，过滤正在迭代的数组。
您可以创建如下所示的自定义管道：
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">您必须在您的应用程序模块. to中注册您的管道。
更详细地解释这一过程的一个SO帖子是在这里：ngFor
您可以在这里阅读关于角自定义管道的内容：https://angular.io/guide/pipes#custom-pipes
https://stackoverflow.com/questions/45197817
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号