如何使用Angular通过Selectbox过滤表

Question

给定一个自定义表组件以及自定义选择框组件，我希望能够通过从选择框中选择一个选项来过滤表行。

我的想法是首先将点击列表添加到我的选择框的选项中，因此，在单击选项时，将执行onoptionClicked（）方法。在此onoptionClicked（）方法中，我将发射options删除事件：

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

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

我的表组件将在事件options opockelected

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

：但是，从根本上讲，这个想法是错误的，但是：

1. 我的IDE显示出一个错误，说事件选项未由任何适用指令或Div Element。

   发出。
   。

2. 该表在选项置换事件上没有反应。

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

Answer 1

我认为使用@output（） decorator < /a>。这是使用此组件来向其他组件发出信号的东西。您似乎在同一组件中使用它。

而是使用a replasesUbject 保留您的过滤器：

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

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

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

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

注意：请记住，当组件被销毁时，请记住完成任何订阅，以避免常见内存泄漏。