矢印キー付きAngular2スクロールドロップダウンメニュー

Question

Select Marketをクリックすると、Observableにデータの配列が表示されます。最初の項目は、プロパティが選択されているため、黄色で強調表示されます。フォーカスが入力ボックスにあるときは、リスト内を矢印で下に移動できます。問題は、スクロール可能な領域でクリップされた項目に向かって矢印を下げることができることです。このアイテムをスクロールして表示するにはどうしたらいいですか？私はそれがQueryListsと関係があると思いますが、オンラインで多くの検索を行った後、適切に実装する方法を理解できません。

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

は、任意およびすべてのために事前にありがとう：

私は市場-Search.Component.tsでngOnInitに次のコードではと思いますが、私は変更を加える必要があるファイル助けて！

Answer 1

私はこれを理解し、問題の答えを探している他の人の回答を投稿したかったのです。答えは、QueryListsを使用して、角度ライフサイクルでいつ使用するかを知っていることです。 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; 
        } 
       } 
      }); 
    }