带有箭头键的Angular2滚动下拉菜单

Question

在下面的plunk中，当您单击Select Market时，一个可观察对象将填充一个数据数组。第一个项目以黄色突出显示，因为它的属性设置为selected。当焦点在输入框上时，您可以在列表中向下箭头。问题是，您可以向下箭头到由可滚动区域裁剪的项目。如何使此项目滚动到视图中？我认为它与QueryLists有关，但在网上搜索了很多次后，我想不出如何正确地实现它。

我认为在Market-Search.Component.ts文件的ngOnInit中的以下代码中，我需要进行更改：

    this.upDownEvents
      .withLatestFrom(this.markets)
      .subscribe(([event, markets]) => {
          for(let market of markets) {
              if(market.selected) {
                    if(<string>event === 'down' && markets.indexOf(market) < markets.length - 1) {
                        markets[markets.indexOf(market) + 1].selected = true;
                        market.selected = false;
                    }
                    if(<string>event === 'up' && markets.indexOf(market) > 0) {
                        markets[markets.indexOf(market) - 1].selected = true;
                        market.selected = false;
                    }

                  this.markets.next(markets);
                  return;
              }
          }
      });

https://plnkr.co/edit/TBYb5QBau9Vmz8PqQpCl?p=preview

提前感谢您的帮助！