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

【问题标题】：Angular2 Scroll Dropdown Menu w/Arrow Keys带箭头键的 Angular2 滚动下拉菜单
【发布时间】：2016-12-28 17:40:22
【问题描述】：

在下面的 plunk 中，当您单击 Select Market 时，Observable 会填充一组数据。第一项以黄色突出显示，因为它的属性设置为选中。当焦点位于输入框时，您可以在列表中向下箭头。问题是您可以向下箭头到被可滚动区域剪裁的项目。我怎样才能让这个项目滚动查看？我认为它与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

提前感谢您的任何帮助！

【问题讨论】：

标签： angular

【解决方案1】：

我想通了这一点，并想为其他寻找问题答案的人发布答案。答案在于使用 QueryList 并知道何时在 Angular 生命周期中使用它们。这是在 ngAfterViewInit 事件中。我已经更新了 plunk：https://plnkr.co/edit/TBYb5QBau9Vmz8PqQpCl?p=preview

ngAfterViewInit(): void {
        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;

                            let marketItems: MarketItemComponent[] = this.marketItems
                                .filter(x => {
                                    return x.market === markets[markets.indexOf(market) + 1];
                                });

                            if (marketItems.length > 0) {
                                marketItems[0].scrollIntoView();
                            }
                        }
                        if (<string>event === 'up' && markets.indexOf(market) > 0) {
                            markets[markets.indexOf(market) - 1].selected = true;
                            market.selected = false;

                            let marketItems: MarketItemComponent[] = this.marketItems
                                .filter(x => {
                                    return x.market === markets[markets.indexOf(market) - 1];
                                });

                            if (marketItems.length > 0) {
                                marketItems[0].scrollIntoView();
                            }
                        }
                        this.markets.next(markets);
                        return;
                    }
                }
            });
    }

【讨论】：