自定义列表组件中的搜索过滤器
Search filter in custom list component
我正在我的 angular 项目中创建一个带有搜索的自定义列表组件。该组件将 itemList 作为输入并列出基于相同的项目。我想在此组件中插入一个搜索栏，以便用户可以搜索列表中的项目。
我已经按照此处提到的 by Moshe Quantz for search. this is not working with the component i have created. please find the stackblitz 代码片段创建了一个管道。
搜索管道有 3 个参数。
- 值：这是您要执行搜索的项目列表。
- keys：它是用逗号分隔值的字符串。此字符串用于指定必须执行搜索的值字段。
- 查询：用户在文本框中键入的实际搜索词
.
public transform(value, keys: string, term: string)
所以问题是您的对象字段与其他示例中使用的字段不同。只需更新它们即可正常工作。
<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>
上的工作示例
请注意，以这种方式使用 Pipe 是一种非常糟糕的做法，并且可能 cause performance issue 随着列表中项目数量的增加。
我正在我的 angular 项目中创建一个带有搜索的自定义列表组件。该组件将 itemList 作为输入并列出基于相同的项目。我想在此组件中插入一个搜索栏，以便用户可以搜索列表中的项目。
我已经按照此处提到的
搜索管道有 3 个参数。
- 值：这是您要执行搜索的项目列表。
- keys：它是用逗号分隔值的字符串。此字符串用于指定必须执行搜索的值字段。
- 查询：用户在文本框中键入的实际搜索词
.
public transform(value, keys: string, term: string)
所以问题是您的对象字段与其他示例中使用的字段不同。只需更新它们即可正常工作。
<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>
请注意，以这种方式使用 Pipe 是一种非常糟糕的做法，并且可能 cause performance issue 随着列表中项目数量的增加。