自定义列表组件中的搜索过滤器

Question

我正在用角度项目中的搜索创建自定义列表组件。该组件将itemList作为输入，并基于该列表列出项目。我想将搜索栏插入此组件，以便用户可以从列表中搜索项目。

我已经创建了Moshe Quantz提到的here管道，以进行搜索。这不适用于我创建的组件。请在此处找到stackblitz代码段。

Answer 1

搜索管道采用3个参数。

1. 值：这是您要对其进行搜索的项目的列表。
2. 键：它是带有逗号分隔值的字符串。此字符串用于指定必须在其上进行搜索的值的字段。
3. 查询：用户在文本框中键入的实际搜索字词

。

  public transform(value, keys: string, term: string) 

所以问题是您的对象字段不同于其他示例中使用的on。只需更新这些内容，它将正常工作。

<input placeholder="search text goes here" [(ngModel)]="query">
<div *ngFor="let item of listItem | search:'title,date,status':query">
    <app-list-card [item]="item"></app-list-card>    
</div>

在stackbliz.com上的工作示例

请注意，以这种方式使用Pipe是非常差的做法，并且可能cause performance issue随着列表中项目数量的增加。