почему фильтрация не работает в угловом режиме при вводе пользователем?

Question

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.log('val',val);
 this._userinput = val;
 this.filteritems = this.items.filter((item)=>{
   return item.name.indexOf(val)!=-1
 })

 console.log(this.filteritems);
}
ngOnInit(){
  this.filteritems = this.items;
}

}

подскажите, пожалуйста, почему не работает фильтрация У меня есть одно поле input. Я хочу отфильтровать список, когда набираю input поле

вот мой код https://stackblitz.com/edit/angular-9wbd1q?file=src%2Fapp%2Fapp.component.ts

Можете ли вы предоставить другой или лучший способ фильтрации этого списка, в настоящее время я делаю 2-стороннее связывание, поэтому я думаю, что это не лучший способ реализовать фильтрацию

Answer 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.indexOf(term) !== -1);
    }
  }

DEMO STACKBLITZ

Answer 2

Это будет работать немного лучше, тип корпуса не требуется

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

  }

Answer 3

Поскольку ожидается точное совпадение - введите полное имя, например «Тест 1», и он даст отфильтрованные результаты.

Возможно, вы хотите проверить, существует ли подстрока. Изменить это:

return item.name.indexOf(val)!=-1

Кому:

return item.name.includes(val)