Angular6 фильтр

Question

Я пытаюсь построить трубу фильтра в Angular 6, но она не работает должным образом.

.html

<form>
  <div class="form-group">
    <div class="input-group">
      <input type="text" class="form-control" name="searchString" placeholder="Type to search..." [(ngModel)]="searchString">
    </div>
  </div>
</form>
<table class="table">
  <tr *ngFor="let user of users | filter2 : searchString">
    {{user.name}}
  </tr>
</table>

pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter2'
})

export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(it => {
      return it.toLowerCase().includes(searchText);
    });
  }
}

Iполучить эту ошибку, когда я пишу внутри ввода:

ОШИБКА TypeError: it.toLowerCase не является функцией

Что я делаю неправильно?Спасибо за ваше время!

пользователей

Answer 1

Вы можете попробовать it.name.toString (). ToLowerCase (). Includes (searchText);

Компонент

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  users:any[];
  constructor(){
    this.users = [
      {name:"John"},
      {name:"Tom"},
      {name:"Carlton"},
      {name:"Judy"},
      {name:"Ada"}
    ];
  }
}

Html

<form>
  <div class="form-group">
    <div class="input-group">
      <input type="text" class="form-control" name="searchString" placeholder="Type to search..." [(ngModel)]="searchString">
    </div>
  </div>
</form>
<table class="table">
  <tr *ngFor="let user of users | filter2 : searchString">
    {{user.name}}
  </tr>
</table>

Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter2'
})

export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(it => {
      return it.name.toLowerCase().includes(searchText);
    });
  }
}