Question

我正在迭代作业列表，并且在该列表上执行了搜索。搜索正在运行，但现在仅根据一个字段过滤列表。

这是我的清单：

<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过滤列表。

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

作业的样本数据。乔布斯是一个对象数组

   [  
      {  
         "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或未定义。但是我认为这是可以的，因为您的样本数据表明null值将是空字符串（""）。如果我的假设不正确，则必须在访问它们之前检查是否已分配值。

Answer 2

尝试这段代码..非常简单。

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

如果您的JSON具有空值，则可以使用以下代码将其替换为空字符串：

items = JSON.parse(JSON.stringify(items).replace(/null/g, '""'));

Answer 3

这不起作用，因为project_id不能测试多个期限的案件。您没有说includes内部的内容，但是如果它是字符串，则可以执行以下操作：

items Array

Answer 4

在搜索管道的转换方法中，将过滤器应用于要对其应用过滤器的所有字段。以下将搜索对象中的所有键：

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

       return keys(it).reduce((prev, key) => {
          return prev || key.toLowerCase().includes(term);
       }, false);
    });
}

如果键或Object.keys不起作用，请使用以下代码代替reduce函数：

...
let bInclude = false;
for(let key in it){
  bInclude = bInclude || key.toLowerCase().includes(term);
}

return bInclude;
...

基于多个字段的过滤列表

4 个答案: