Angular - Как фильтровать (искать) данные по нескольким свойствам данных (полей)? - PullRequest
Новая
       24

Angular - Как фильтровать (искать) данные по нескольким свойствам данных (полей)?

0 голосов
/ 11 декабря 2018

Я получаю свои данные через API.Я хочу создать фильтрацию и поиск по данным.Я создал канал, и он имеет следующий код:

Файл: text-search.pipe.ts

transform(items: any[], searchText: string): any {
    if (!items) return [];

    if (!searchText) return items;
    console.log("ITEMS ARE",items);
    searchText = searchText.toLowerCase();


    return items.filter(it => {
        return it.hospital_name.toLowerCase().includes(searchText);
    });

  }

Мой component.html файл выглядит следующим образом:

Входные данныеполе // Пользователь может искать по имени 

 <input type="text" [(ngModel)]="searchText" class="form-control" placeholder="Search">

И тогда к трубе применяется: 

 <div class="col-lg-3 col-md-4 col-sm-6" *ngFor="let hospital of hospital_list | hospitalSearch: searchText; let i = index;">

Вопрос: Если у меня есть другое поле ввода или несколькодругие поля, такие как Поле города, где пользователь также может выполнять поиск по городу, специализации и т. д.

Например: 

 <input type="text" [(ngModel)]="searchCity" class="form-control" placeholder="Search">

Так как же изменить существующую трубу?Или мне нужно создать новую трубу.

Вещи, которые я пробовал: В pipe.ts файле: 

transform(items: any[], searchText: string, searchCity?: string): any {
    if (!items) return [];

    if (!searchText) return items;
    console.log("ITEMS ARE",items);
    searchText = searchText.toLowerCase();

    if (!searchCity) return items;
    console.log("ITEMS ARE",items);
    searchCity= searchCity.toLowerCase();


    return items.filter(it => {
        return it.hospital_name.toLowerCase().includes(searchText);
        return it.hospital_city.toLowerCase().includes(searchCity);

    });

Это не работает, так как2-я инструкция по возврату недостижима.Я пытался прочитать API, я не нашел никакой поддержки.Пожалуйста, объясните мне, как добавить фильтрацию поиска по нескольким полям к полученным данным.Благодарю вас.}

1 Ответ

0 голосов
/ 11 декабря 2018

Используйте здесь логический оператор.Вам нужно будет выбрать, какой из них наиболее подходит для вашего конкретного случая использования фильтрации.

Фильтровать элементы, которые соответствуют хотя бы одному из: 

return items.filter(it => {
    return it.hospital_name.toLowerCase().includes(searchText)
        || it.hospital_city.toLowerCase().includes(searchCity);
});

Фильтровать элементы, которые соответствуют всем: 

return items.filter(it => {
    return it.hospital_name.toLowerCase().includes(searchText)
        && it.hospital_city.toLowerCase().includes(searchCity);
});

Чтобы вызвать ваш канал с несколькими аргументами, используйте другой :. 

*ngFor="let hospital of hospital_list | hospitalSearch: searchText:searchCity"
...