单击按钮时触发角管事件

Question

我想在单击按钮时实现 Angular 5 搜索管道。

我有一个输入框，它将接收自定义搜索值，并从对象数组中过滤不同的键值。我在输入文本时实现了角管，它进行搜索，但我想仅在用户输入和搜索按钮被单击时触发此操作。无论如何我们可以实现这一目标吗？我被困在实现点击事件上

itemsearch.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'itemsearch'
})
export class ItemsearchPipe implements PipeTransform {

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

if (!term) {
  return value;
}
return (value || []).filter(item => keys.split(',').some(key => 
 item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

} }

 itemcomponent.ts


<div *ngFor="let item of items | itemsearch:'name, age':query"> 
{{item.name}}
         {{item.age}} </div>
</div>

Answer 1

您可以做的就是从 中删除管道运算符*ngFor并将逻辑移至组件中

组件.ts

import { ItemsearchPipe } from ...

search() {
   // you can do whatever you want here, return the value or store it in a variable
   this.items = this.ItemsearchPipe.transform(value, keys, term); 
}

然后在你的html中

<div *ngFor="let item of items">
  <!-- ... -->
</div>
<button (click)="search()"></button>

当使用管道运算符时，它基本上会在每次值更改时调用管道函数，当您将逻辑移动到组件中时，您可以控制何时调用管道函数