как отфильтровать массив с несколькими свойствами в угловых - PullRequest
Новая
       53

как отфильтровать массив с несколькими свойствами в угловых

0 голосов
/ 04 июня 2018

Я создал трубу в своем угловом 5 проекте, который будет принимать входные данные из html и массива фильтра и будет возвращать отфильтрованный массив.Но в настоящее время я передаю имя свойства ("firstName") из файла HTML.Теперь я хочу это, он должен отфильтровать свойства "firstName" и "lastName".Пожалуйста, скажите мне, что я должен изменить, чтобы сделать то же самое ???

search-filter.pipe.ts 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
    transform(data: any, search?: string, propertyName?: string): any {
        if (search === undefined) {
            return data;
        } else {
            return data.filter(obj => obj[propertyName].toLowerCase().includes(search.toLowerCase()));
        }
    }
}

user.component.html

<div class="row" *ngFor="let data of datas| searchFilter: search: 'firstName'}">
   {{data.lastName}}, {{data.firstName}}
</div>

sample-data.ts 

 datas: [
{ firstName: 'vipin', company: 'abc', lastName: 'sharma' },
{ firstName: 'kevin', company: 'abc2', lastName: 'xyz' },
{ firstName: 'Leos', company: 'abc3', lastName: 'abc' },
]

Ответы [ 3 ]

0 голосов
/ 05 июня 2018

Можете ли вы попробовать вот так 

 this.data.filter((element: datatype) =>element.firstName && element.lastName)
0 голосов
/ 08 июня 2018

Я получил ответ, и он работает нормально: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
    transform(data: any, search?: string, propertyName?: string, propertyName2?: string): any {
        if (search === undefined) {
            return data;
        } else {
            let filteredData = data.filter(obj => obj[propertyName].toLowerCase().includes(search.toLowerCase()));
            if (propertyName2) {
                filteredData = filteredData.concat(data.filter(obj => obj[propertyName2].toLowerCase().includes(search.toLowerCase())));
            }
            return filteredData;
        }
    }
}
0 голосов
/ 04 июня 2018

Что вы можете сделать, это указать свойства, по которым вы хотите выполнить поиск: 

this.items.map((item) => {
  return {...item, searchTerms: item.firstname + item.lastname;
});

<li *ngFor="let item of items | searchFilter:search:'searchTerms'>{{item.name}}</li>
...