自定義列表組件中的搜索過濾器

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 是非常糟糕的做法，並且隨着列表中項目數量的增加可能會導致性能問題。