Angular 2 Помогите реализовать фильтр
Доброго времени суток,
Есть json в component.ts : data:JSON = [{name:"Вася",lastname:"Иванов",age:"25"},{name:"Боб",lastname:"Додсон",age:"18"}]; и в component.html : <div id="filter"> <div><label for="name">Имя</label> <input id="name" type="text"> </div> <div><label for="lastname">Фамилия</label> <input id="lastname" type="text"> </div> <div><label for="age">Возраст</label> <input id="age" type="number"> </div> </div> <div *ngFor="let item of data, let i=index"> <p>{{ item.name }} {{item.lastname}}</p> <p>Возраст: {{ item.age }}</p> </div> Нужно сделать так, чтобы когда, например, пишешь в фильтре имени "вас", из div`a *ngFor исчезали все div`ы, у которых в имени нет подстроки "вас", т.е. останется только Вася (data[0]). :help: :help: :help: :help: :help: |
|
Там показано как сделать фильтр для простого массива, можете подсказать как сделать для массива с json объектами? Как в моём примере
data:JSON = [{name:"Вася",lastname:"Иванов",age:"25"},{name:"Боб",lastname:"Додсон",age:"18"}] Очень срочно нужно, Angular 4 пока плохо знаю и не могу написать такой pipe |
<input id="name" type="text" [(ngModel)]="searchText" /> <div *ngFor="let item of data | filter : searchText"> <p>{{ item.name }} {{item.lastname}}</p> <p>Возраст: {{ item.age }}</p> </div> import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filter' }) export class FilterPipe implements PipeTransform { transform(items: any[], searchText: string): any[] { if(!items) return []; if(!searchText) return items; searchText = searchText.toLowerCase(); return items.filter( it => { return it.name.toLowerCase().includes(searchText); }); } } |
Спасибо огромное вам:dance: :thanks: :thanks: :thanks: :thanks:
|
Часовой пояс GMT +3, время: 00:01. |