Трубы angular 2 фильтруют несколько столбцов с учетом нулевого значения

Я использую канал для фильтрации данных по трем разным столбцам в таблице данных. Имена столбцов: 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

Любая помощь будет принята с благодарностью.


typescript javascript angular lodash pipe
person mistletoe    schedule 06.05.2017    source источник
comment
Похоже, что переменная запроса не установлена   -  person LiverpoolOwen    schedule 07.05.2017
comment
Где ваш код, который устанавливает эту переменную   -  person LiverpoolOwen    schedule 07.05.2017
comment
@LiverpoolOwen У меня есть три текстовых поля, которые устанавливают переменную запроса. Я отредактирую свой вопрос.   -  person mistletoe    schedule 07.05.2017

Ответы (3)


arrow_upward
0
arrow_downward

вам нужно проверить, является ли имя, отдел или категория каждого 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;
    }
}
person Ahmed Musallam    schedule 07.05.2017
comment
Большое спасибо! Я попробовал это, но он по-прежнему не дает результатов поиска, которые также включают результаты, которые имеют нулевое значение в качестве категории. (когда пользователь ищет только имя). - person mistletoe; 07.05.2017
comment
Я думаю, что я потерялся в том, что вы спрашиваете, можете ли вы опубликовать образец массива и образцы запросов с их соответствующим ожидаемым результатом, который вы ищете? Это поможет мне лучше понять. - person Ahmed Musallam; 07.05.2017

arrow_upward
0
arrow_downward

Если вы хотите фильтровать категорию только тогда, когда категория не равна нулю, вы можете сделать это:

@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;
    }
}
person Andrii Litvinov    schedule 07.05.2017

arrow_upward
0
arrow_downward

Попробуйте это, у меня это отлично работает, когда я ищу несколько столбцов.

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

}

Раньше у меня были проблемы, когда я использовал этот «импорт * как _ из «lodash»; «то есть данные не отображались, когда я загружаю страницу, но когда я ищу данные, фильтр работал нормально, и данные также отображались.

person NaveeN    schedule 14.06.2018