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

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 是非常糟糕的做法，并且随着列表中项目数量的增加，可能会导致性能问题。