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

Question

在您点击选择市场时，在下面的小块中，Observable将填充一组数据。第一项以黄色突出显示，因为它的属性设置为选中状态。当焦点在输入框上时，您可以在列表中向下箭头。问题是你可以向下箭头到可滚动区域裁剪的项目。我怎样才能让这个项目滚动查看？我认为这与QueryLists有关，但是经过大量的在线搜索后，我无法弄清楚如何正确实施它。

我认为在市场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事件中。我更新了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; 
        } 
       } 
      }); 
    }