考虑空值的管道角度2过滤多个列答案

【问题标题】：Pipes angular 2 filter multiple columns considering null value考虑空值的管道角度2过滤多个列
【发布时间】：2017-05-06 23:53:54
【问题描述】：

我正在使用管道过滤数据表中三个不同列的数据。列的名称是category、name、department。

我传递的参数如下：

<table class="table table-striped"  [mfData]="listdata | dataFilter : filtername : filterDep : filterCategory">

我有*ngFor循环：

<tr *ngFor="let item of mf.data; let i =index">
    <td>
        {{i+1}}
    </td>
    <td>{{ item.name }}</td>
    <td>{{item.department}}</td>
    <td>{{item.category}}</td>

</tr>

设置查询变量的代码是

<th colspan="2">
    Filter by name:
    <input class="form-control" [(ngModel)]="filtername" (input)="change()" />
</th>
<th colspan="1">
    Filter by Department:
    <input class="form-control" [(ngModel)]="filterDep" (input)="change()" />
</th>
<th colspan="1">
    Filter by Category:
    <input class="form-control" [(ngModel)]="filterCategory" (input)="change()" />
</th>

我有一些category 是null 的数据。

我使用的管道是：

@Pipe({
   name: "dataFilter"
})
export class DataFilterPipe implements PipeTransform {

    transform(array: any[], query: string, query2: string, query3: string): any {

        let notNullCategory = _.reject(array, ['category', null]);

        if (query || query2 || query3) {

            return _.filter(notNullCategory, row => ((row.name.indexOf(query) > -1) && (row.department.indexOf(query2) > -1) && (row.category.indexOf(query3) > -1)));

        }
        return array;
    }
}

这样，如果用户使用一些name 进行搜索，则只考虑具有category 的非空值的行。

我也想考虑具有空值的行，但我无法这样做。

如果我将管道更改为：

@Pipe({
    name: "dataFilter"
})
export class DataFilterPipe implements PipeTransform {

    transform(array: any[], query: string, query2: string, query3: string): any {
        if (query || query2 || query3) {

            return _.filter(array, row => ((row.name.indexOf(query) > -1) && (row.department.indexOf(query2) > -1) && (row.category.indexOf(query3) > -1)));

        }
        return array;
    }
}

我得到错误：

Cannot read property 'indexOf' of null

任何帮助将不胜感激。

【问题讨论】：

查询变量好像没有设置
设置这个变量的代码在哪里
@LiverpoolOwen 我有三个设置查询变量的文本框。我将编辑我的问题。

标签： javascript angular typescript pipe lodash

【解决方案1】：

您需要检查每个row 的名称、部门或类别是否为空：

@Pipe({
    name: "dataFilter"
})
export class DataFilterPipe implements PipeTransform {

    transform(array: any[], query: string,query2: string,query3: string): any {

        if(query || query2 || query3)
        {

            return  _.filter(array, row => 
            {
                var hasName =       row.name && row.name.indexOf(query) > -1;
                var hasDepartment = row.department && row.department.indexOf(query2) > -1
                var hasCategory =   row.category && row.category.indexOf(query3) > -1
                return hasName && hasDepartment && hasCategory;
            });
        }
        return array;
    }
}

【讨论】：

非常感谢！我试过这个，但它仍然没有给出搜索结果，其中还包括具有空值作为类别的结果。（当用户只搜索姓名时）。
我想我迷失了你在问什么，你能发布一个示例数组和示例查询以及你正在寻找的各自的预期输出吗？这将有助于我更好地理解。

【解决方案2】：

如果您只想在类别不为空时过滤类别，您可以这样做：

@Pipe({
    name: "dataFilter"
})
export class DataFilterPipe implements PipeTransform {
    transform(array: any[], name: string, department: string, category: string): any {

        if (name || department || category) {
            _.filter(array, row => ((row.name.indexOf(name) > -1)
                && (row.department.indexOf(department) > -1)
                && (row.category ? row.category.indexOf(category) > -1 : true))
            );
        }
        return array;
    }
}

【讨论】：

【解决方案3】：

试试这个，当我搜索多个列时它对我来说很好。

 transform(categories: any, searchText: any): any {
  if(searchText == null) return categories;

  return categories.filter(function(category){
    var name_search=category.name.toLowerCase().indexOf(searchText.toLowerCase()) > 
      -1;
    var email_search=category.email.toLowerCase().indexOf(searchText.toLowerCase()) 
     > -1;
    return name_search || email_search;
  })

}

以前我在使用这个“import * as _ from “lodash”时遇到了问题； "也就是说，当我加载页面时数据没有显示，但是当我搜索数据时，过滤器工作正常并且数据也显示..

【讨论】：