import { Component,OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit{
_userinput:string='';
filteritems:any[];
items:any[] = [
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
},
{
name: 'Test 1'
},
{
name: 'Test 2'
}
]
name = 'Angular 6';
get userinput(){
return this._userinput;
}
set userinput(val){
console.info('val',val);
this._userinput = val;
this.filteritems = this.items.filter((item)=>{
return item.name.indexOf(val)!=-1
})
console.info(this.filteritems);
}
ngOnInit(){
this.filteritems = this.items;
}
}
не могли бы вы рассказать мне, почему не работает фильтрация У меня есть одно поле input, которое я хочу отфильтровать, когда набираю в поле input
вот мой код https://stackblitz.com/edit/angular-9wbd1q?file=src%2Fapp%2Fapp.component.ts
не могли бы вы предоставить другой или лучший способ фильтрации этого списка, в настоящее время я использую двухстороннюю привязку, поэтому я думаю, что это не лучший способ реализовать фильтрацию



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Поскольку он ожидает точного совпадения - введите полное имя, например. «Тест 1», и он предоставит отфильтрованные результаты.
Вероятно, вы захотите проверить, существует ли подстрока. Измените это:
return item.name.indexOf(val)!=-1
К:
return item.name.includes(val)
Лучше всего использовать фильтрующую трубу следующим образом:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any, term: any): any {
if (term === undefined) return items;
return items.filter(item => item.name.indexOf(term) !== -1);
}
}
Это будет работать немного лучше, не требуется тип кожуха.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any, term: any): any {
if (term === undefined) return items;
return items.filter(item => (item.name).toLowerCase().indexOf((term).toLowerCase()) !== -1);
}
}
почему ты говоришь лучше всего? Команда Angular удалила трубу фильтра из-за плохой производительности - angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe