Question

在我的Angular程序中，我尝试根据另一个数组过滤数组。我想仅显示empInfo数组中etoEarned属性值type的人员名称（来自ptoData数组）。 empInfo数组是包含其员工详细信息的所有员工的列表，ptoData数组是任何人已经起飞的所有日期的列表。两个阵列中都有一个EmpKey字段，表明哪个员工休假了。现在，它显示了所有人，只为那些拥有它们的人填写了值，如下所示：

如何消除没有分配时间的姓名？

以下按钮调用的函数：

＆＃13;

    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>`
        );
    }

＆＃13;

这是我的HTML：

＆＃13;

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

＆＃13;

编辑 - 我添加了一个功能（感谢@LarsMontanaro），它解决了显示每个人姓名的问题，但仍为每个人留出了空间。我假设问题是我的HTML，因为我在let emp of empInfo之前有*ngIf="empHasEto(emp)所以它仍然会通过每个人，但只显示返回true的表格。如何解决此问题以消除空白区域？（在这里参考＆＃39;它看起来像什么）：

另外，这是我的新功能（我已更新上面的.html）：

＆＃13;

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

＆＃13;

Answer 1

修改：更好的方法是使用管道来过滤您正在迭代的数组。

您可以像这样创建自定义管道：

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

您可以在此处阅读Angular Custom Pipes：https://angular.io/guide/pipes#custom-pipes

根据另一个数组

1 个答案: