Angular 单击按钮时触发角度管道事件

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

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

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
{{item.name}
{{item.age}

您可以从

*ngFor

中删除管道操作符，并将逻辑移到您的组件中

组件技术

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>

---

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

*ngFor

中删除管道操作符，并将逻辑移动到组件中

组件技术

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>

---

当使用管道操作符时，它基本上会在每次值更改时调用管道函数，当您将逻辑移动到组件中时，您可以控制何时调用管道函数。我制作示例以实现您的想法

提示：中的var查询不应是绑定到搜索文本框的同一对象。我们应该有另一个用于文本框映射的对象。单击搜索后，将搜索文本框中的新值绑定到“查询”对象

魔术

---

快乐编码：D

我制作示例来实现您的想法

提示：中的var查询不应是绑定到搜索文本框的同一对象。我们应该有另一个用于文本框映射的对象。单击搜索后，将搜索文本框中的新值绑定到“查询”对象

魔术

---

快乐编码：D

值得一读：值得一读：@Duy-Doan我想在UI上呈现之前访问过滤/管道项目数组。我试图通过ItemsearchPipe的实例进行访问，但我得到的是唯一的对象，而不是@Duy Doan的值。在UI上呈现之前，我想访问过滤/管道项目数组。我试图通过ItemsearchPipe实例进行访问，但我只返回了一个对象，而没有返回值