如何使用 angular 通过选择框过滤 table

Question

给定自定义 table 组件以及自定义 select 框组件，我希望能够通过 selecting 选项过滤 table 行来自 select 框。

我的想法是先在我的select框的选项中添加一个点击监听器，这样当点击一个选项时，onOptionClicked()方法就会被执行。在这个 onOptionClicked() 方法中，我将发出一个 optionSelected 事件：

  @Output() optionSelected = new EventEmitter<string>();

  onOptionClicked(option: string) {
    this.optionSelected.emit(option);
  }

我的 table 组件将对事件做出反应 optionSelected:

<div class="tbl" (optionSelected)="filterTableRows($event)">
  <table>
    <thead>
...

这个想法似乎有一些根本性的错误，但是：

我的 IDE 显示错误 Event optionSelected is not emitted by any applicable directives nor by div element 。
table 对 optionSelected 事件没有反应。

看来问题是我的 table 组件和我的 select-box 组件是不同的组件，显然它们无法通过事件发射器进行通信。有人可以帮帮我吗？

Answer 1

我认为@Output()decorator的用法存在误区。这是用来向使用此组件的其他组件发出信号的东西。您似乎在同一个组件中使用它。

而是使用 ReplaySubject 来保留您的过滤器：

optionSelected$ = new ReplaySubject<string>('');

onOptionClicked(option: string) {
  this.optionSelected$.next(option);
}

要进行数据过滤，您可以订阅重播主题：

this.optionSelected$.subscribe(filter => {
  this.yourFilteredData = this.yourData.filter(item => { 
   // <-- you filter code
  });
})

注意：请记得在组件销毁时完成任何订阅，以免出现常见的memory leak.

How to filter a table via a selectbox using angular