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

你能提供其他或最好的方法来过滤这个列表，目前我正在进行双向绑定，所以我认为这不是实现过滤的最佳方式

Answer 1

因为它预期完全匹配 - 输入整个名称，例如。＆＃34;测试1＆＃34;它将提供过滤结果。

您可能想检查子字符串是否存在。改变这个：

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

要：

return item.name.includes(val)

Answer 2

最好的方法是使用Filter管道，如下所示，

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 3

这样可以稍微好一点，不需要任何类型的外壳

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

  }

为什么在键入用户输入时过滤不起作用？

3 个答案: