Angular6滤镜

Question

I'm trying to build a filter pipe in Angular 6, but it's not working properly.

.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 get this error when I write inside input:

ERROR TypeError: it.toLowerCase is not a function

What am I doing wrong? Thank you for your time!

users

Answer 1

You can try it.name.toString().toLowerCase().includes(searchText);

Component

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