Question

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

这是我的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);
  }
}

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

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

过滤管无法正常工作

1 个答案: