使用下拉列表和Angular 7过滤数据

Question

我了解Angular 4+不会使用管道来过滤数据。

我有一个父组件，该组件带有一组下拉按钮，用于不同的过滤方法。

 <div class="btn-group" dropdown>
                <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                        aria-controls="dropdown-basic">
                  Main Indicator<span class="caret ml-1"></span>
                </button>
                <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                    role="menu" aria-labelledby="button-basic">
                  <li role="menuitem" *ngFor="let main of macroDataMainIndicators">
                    <span class="dropdown-item macMainIndicatorFilter">
                      {{ main }}
                    </span>
                  </li>
                </ul>
              </div>

              <div class="btn-group ml-2" dropdown>
                <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                        aria-controls="dropdown-basic">
                  Series Category<span class="caret ml-1"></span>
                </button>
                <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                    role="menu" aria-labelledby="button-basic">
                  <li role="menuitem" *ngFor="let cats of macroSeriesCategories">
                    <span class="dropdown-item macSeriesCatFilter">
                      {{ cats }}
                    </span>
                  </li>
                </ul>
              </div>

              <div class="btn-group ml-2" dropdown>
                <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                        aria-controls="dropdown-basic">
                  Series Type<span class="caret ml-1"></span>
                </button>
                <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                    role="menu" aria-labelledby="button-basic">
                  <li role="menuitem" *ngFor="let t of macroDataSeriesTypes">
                    <span class="dropdown-item macSeriesTypeFilter">
                      {{ t }}
                    </span>
                  </li>
                </ul>
              </div>

              <div class="btn-group ml-2" dropdown>
                <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                        aria-controls="dropdown-basic">
                  Country<span class="caret ml-1"></span>
                </button>
                <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                    role="menu" aria-labelledby="button-basic">
                  <li role="menuitem" *ngFor="let country of macroCountries">
                    <span class="dropdown-item macCountryFilter">
                      {{ country }}
                    </span>
                  </li>
                </ul>
              </div>

              <div class="btn-group ml-2" dropdown>
                <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                        aria-controls="dropdown-basic">
                  Database<span class="caret ml-1"></span>
                </button>
                <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                    role="menu" aria-labelledby="button-basic">
                  <li role="menuitem" *ngFor="let dbs of macroDatabases">
                    <span class="dropdown-item macDBFilter">
                      {{ dbs }}
                    </span>
                  </li>
                </ul>
              </div>

              <div class="btn-group ml-2" dropdown>
                <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                        aria-controls="dropdown-basic">
                  Sector<span class="caret ml-1"></span>
                </button>
                <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                    role="menu" aria-labelledby="button-basic">
                  <li role="menuitem" *ngFor="let macSect of macroSectors">
                    <span class="dropdown-item macSectFilter">
                      {{ macSect }}
                    </span>
                  </li>
                </ul>
              </div>

在同一html中，我还有我的子组件：

<app-search-results-list [filterDataBy]="filterBy" [data]="macroDataSets"></app-search-results-list>

父组件从api获取数据，以某种方式对其进行排列，然后通过(app-search-results-list)属性将其传递给子组件[data]，该子组件然后显示数据表。 / p>

Search-Results-List组件的Input属性为

@Input() data: Series[];

这里的目标是从api接收数据。父组件通过下拉菜单具有过滤器属性。数据列表保留在子组件中。当用户单击其中一个下拉菜单中的项目时，我需要将该数据发送到子组件。

我无法执行(click)="filterBy = {{main}}"（以第一个下拉html为例），因为在表达式中插值无效。

在子组件中，我至少需要知道要过滤的内容（下拉项中的字符串文本），并且最好了解过滤器的常规类型（国家/地区，主要指标...）。

我想知道是否简单地将带有(click)="onFilter($event)"的对象传递给子组件，然后让子组件对其进行分类，或者尝试以某种方式从每个下拉列表中传递插值的字符串，是否更容易。有什么想法吗？