Фильтр Труба не работает в угловых - PullRequest
Новая
       4

Фильтр Труба не работает в угловых

0 голосов
/ 26 августа 2018

У меня есть список пользователей в массиве, и я хочу отфильтровать список пользователей по значению поля ввода.

Это мой 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);
  }
}

Но это не фильтрует пользователей, когда я набираю входные данные.Может кто-нибудь помочь мне исправить это?

1 Ответ

0 голосов
/ 26 августа 2018

Добавьте search.value в свой HTML-код. 

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