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>

管道

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

当我在输入中写入时出现此错误：

ERROR TypeError: it.toLowerCase 不是函数

我做错了什么？感谢您的宝贵时间！

users

Answer 1

你可以试试。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>

管道

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