过滤管不工作在角度答案

【问题标题】：Filter Pipe is not working in angular过滤管不工作在角度
【发布时间】：2018-08-26 04:25:55
【问题描述】：

我有一个数组中的用户列表，我想根据输入字段值过滤用户列表。

这是我的 html 代码。

 <div>
      <mat-form-field>
        <input matInput #search>
      </mat-form-field>
    </div>
    <mat-list>
      <mat-list-item *ngFor="let user of users | userPipe: { name: search} ">
        <img matListAvatar>
        <h3 class="name" matLine> {{user.name}} </h3>
        <h3 class="mobile" matLine> {{user.mobileNo}} </h3>
        <mat-divider></mat-divider>
      </mat-list-item>
    </mat-list>
  </div>

这是我的自定义管道。

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

@Pipe({
  name: 'userPipe'
})
export class UserPipePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (!value || !args) {
      return value;
    }
    return value.filter(item => item.name.indexOf(args) !== -1);
  }
}

但是当我输入输入字段时，这不会过滤用户。谁能帮我解决这个问题？

【问题讨论】：

标签： angular pipe

【解决方案1】：

在您的 html 代码中添加 search.value。

<mat-list>  
  <mat-list-item *ngFor="let user of users | userPipe: { name: search.value}">
    <img matListAvatar>
    <h3 class="name" matLine> {{user.name}} </h3>
    <h3 class="mobile" matLine> {{user.mobileNo}} </h3>
    <mat-divider></mat-divider>
  </mat-list-item>
</mat-list>

然后改变你的管道如下。

export class UserPipePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (!value || !args) {
      return value;
    }
    return value.filter(item => item.name.toLocaleLowerCase().indexOf(args.name) !== -1);
  }
}

【讨论】：