时间戳

首页 > 解决方案 > 为什么在输入用户输入时过滤不能以角度工作？

javascript - 为什么在输入用户输入时过滤不能以角度工作？

问题描述

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 路绑定，所以我认为这不是实现过滤的最佳方式

标签： javascriptangular

解决方案

因为它需要完全匹配 - 输入全名，例如。“测试 1”，它将提供过滤结果。

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

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

至：

return item.name.includes(val)

推荐阅读