ionic-framework - 基于多个字段的过滤列表

Question

我正在迭代一个工作列表，并且在这个列表上实现了一个搜索。搜索正常，但现在它只根据一个字段过滤列表。

这是我的 list :

<ion-card *ngFor="let job of allJobs | search : searchTerm">
    <ion-grid>
    <ion-row>
        <ion-col>
        <div>
            <span> {{job.day | uppercase}}</span>
            <span> {{job.month | uppercase}}</span>
        </div>
        </ion-col>

        <ion-col>
        <div>
            <span>{{job.time}}</span>
            <span>{{job.name}}</span>
        </div>
        </ion-col>
    </ion-row>
    </ion-grid>
</ion-card>

我为实现搜索做了一个管道。这是它的代码。

  transform(items: any[], terms: string): any[] {
    if(!items) return [];
    if(!terms) return items;
    terms = terms.toLowerCase();
    return items.filter( it => {
      return it.name.toLowerCase().includes(terms); // only filter name
    });
  }

现在列表仅根据 name 字段进行过滤。我想根据 day、month 和 time 过滤列表。

谁能告诉我如何做到这一点？

作业的样本数据。 Jobs 是一个对象数组

   [  
      {  
         "id":10,
         "day":"Monday",
         "month":"June",
         "time":"10",
         "name":"John",
         "email":"john@gmail.com"
      },
      {  
         "id":11,
         "day":"Tuesday",
         "month":"May",
         "time":"12",
         "name":"Jane",
         "email":"jane@gmail.com"
      },
      {  
         "id":12,
         "day":"Friday",
         "month":"June",
         "time":"16",
         "name":"",
         "email":"john@gmail.com"
      },
      {  
         "id":13,
         "day":"Tuesday",
         "month":"August",
         "time":"21",
         "name":"",
         "email":"kevin@gmail.com"
      },
      {  
         "id":14,
         "day":"Saturday",
         "month":"December",
         "time":"12",
         "name":"Sam",
         "email":"sam@gmail.com"
      },

   ]

而 searchTerm 只是一个字符串。

如您所见，示例数据中的字段比 HTML 中显示的字段多，但我只尝试搜索 HTML 中显示的字段。有些字段可以有空值(例如，示例数据中的name有两个空值)

我尝试了已经提供的解决方案，但没有一个能满足我的要求。

P.S:在某处读到管道不是执行此类功能的最佳选择。我也准备在类里面实现这个逻辑。

Answer 1

尝试将您的 includes 与 logical or-operator 结合使用(||):

transform(items: any[], terms: string): any[] {
    if (!items) return [];
    if (!terms) return items;
    terms = terms.toLowerCase();
    return items.filter(it => {
      return it.name.toLowerCase().includes(terms) ||
        it.day.toLowerCase().includes(terms) ||
        it.month.toLowerCase().includes(terms) ||
        it.time.toLowerCase().includes(terms)
    });
}

如果任何 includes 返回 true，则此语句将返回 true。所以基本上任何 name、day、month 或 time 包含搜索项的项目都将由管道返回。

此解决方案假定 name、day、month 和 time 不为 null 或未定义。但我假设这没关系，因为您的示例数据表明空值将是空字符串 ("")。如果我的假设不正确，您必须在访问它们之前检查这些值是否已分配。