Question

在单击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

提前感谢您提供任何帮助！

Answer 1

我想出来了，并希望为其他寻找问题答案的人发布答案。答案的确在于使用QueryLists并知道何时在Angular生命周期中使用它们。这是在ngAfterViewInit事件中。我已在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;
                    }
                }
            });
    }

Angular2滚动下拉菜单带箭头键

1 个答案: