Javascript 当输入到用户输入时，为什么过滤不起作用？

你能告诉我为什么过滤不起作用吗我有一个

输入

字段，当我在

输入

字段上键入时，我想过滤列表

这是我的密码

---

您能否提供其他或最佳方式来筛选此列表？目前我正在进行双向绑定，因此我认为这不是实现筛选的最佳方式，因为它需要精确匹配-键入全名，例如“测试1”，它将提供筛选结果

您可能需要检查子字符串是否存在。更改此项：

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

}

致：

---

最好的方法是使用过滤管，如下所示

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

---

你为什么说它最好？由于性能不佳，Angular团队拆除了过滤管-

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

  }