Question

我有一个输入搜索字段，如果我在搜索字段中提供数据，它必须根据给定的用户名过滤用户。

HTML：

<mat-tab label="Active">
      <mat-icon for="search">search</mat-icon>
      <input type="search" [(ngModel)]="filter" name="search" class="search" placeholder="Company">
      <ul>
        <li *ngFor="let message of activeMessages| messagefilter: filter" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
          <span>{{message.messages[message.messages.length -1].updated_at  | date:'dd.MM.yyyy'}}</span>
          <img style="width: 40px;" [src]="message.from_user_image || '../assets/images/msg.png'"/>
          <p style="padding-top: 16px;display: inline;">{{message.from_user_name}}</p>
          <p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.messages[message.messages.length -1].text}}</b></p>
        </li>
      </ul>
    </mat-tab>

Pipe.ts：

    /* Package filter to write filter functions for Package*/
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'messagefilter',
  pure: false
})

export class MessagePipe implements PipeTransform {
  transform(items, filter) {
    console.log(items);
    console.log(filter);
    if (!items || !filter) {
      return items;
    }
    return items.filter((item) => this.applyFilter(item, filter));
  }
  /* Function to apply filter for Messages */
  applyFilter(user, filter): boolean { 
    if (filter && filter != user.from_user_name) { 
        return false;
    }  
    // if the user passes all the filters, show it
    return true; 
  }
}

我已粘贴更新的代码。请让我知道我错在哪里

Answer 1

您的filter logic似乎错了，

将逻辑更改为，

if (filter == user.from_user_name) { 
    return true; 
} else{ 
    return false; 
}

您的管道变为：

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

@Pipe({
  name: 'messagefilter',
  pure: false
})

export class MessagePipe implements PipeTransform {
  transform(items, filter) {
    console.log(items);
    console.log(filter);
    if (!items || !filter) {
      return items;
    }
    return items.filter((item) => this.applyFilter(item, filter));
  }
  /* Function to apply filter for Messages */
  applyFilter(user, filter): boolean { 
    if (filter == user.from_user_name) { 
        return true; 
    } else{ 
        return false; 
    }
  }
}

Answer 2

在Angular中（与AngularJs相比），不建议使用Pipes过滤或更改数据。人们应该只使用它们来格式化现有数据的外观（除了极少数例外）。

您已经在模型中拥有过滤器值，因此您可以创建一个不同的属性来使用它并返回已过滤的列表，您已经在管道中有类似的内容：

filteredMessages = items.filter((item) => this.applyFilter(item, filter));

然后在模板中使用它：

<tr *nfFor = "let d in filteredMessages">

如何根据使用angular2给出的输入过滤数据

2 个答案: