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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
53
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Поскольку он ожидает точного совпадения - введите полное имя, например. «Тест 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);
    }
  }

ДЕМО STACKBLITZ

почему ты говоришь лучше всего? Команда Angular удалила трубу фильтра из-за плохой производительности - angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Julius 06.05.2018 09:58

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

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

  }

Другие вопросы по теме