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

Question

我正在创建一个自定义列表组件，并在我的 angular 项目中进行搜索。 该组件将 itemList 作为输入并基于相同的项目列出项目。 我想在这个组件中插入一个搜索栏，以便用户可以从列表中搜索项目。

我已经创建了一个由 Moshe Quantz 在这里提到的用于搜索的管道。 这不适用于我创建的组件。 请在此处找到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 是非常糟糕的做法，并且随着列表中项目数量的增加可能会导致性能问题。