在 cdk-virtual-scroll-viewport 中按导航向上/向下按钮时滚动不起作用

Question

我在 mat-autocomplete 中使用 cdk-virtual-scroll-viewport。每当使用鼠标滚动时滚动都可以正常工作，但每当按下 keydown 按钮时滚动就不起作用。

预期行为： 如果焦点超出可见视口，列表应自动向下/向上滚动

实际行为： 它只是不滚动，如果到达实际渲染项目的末尾，它会返回到开头并且不渲染新项目。

就像这个链接中的那样：https://stackblitz.com/edit/angular-5rmvpq

Answer 1

import { Component, ViewChild, ElementRef } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  options: string[] = [];

  @ViewChild(CdkVirtualScrollViewport, {static: false}) viewport: CdkVirtualScrollViewport;
  @ViewChild('autocompleteInput') autocompleteInput: ElementRef;

  constructor() {
    for (let i = 0; i < 100; i++) {
      this.options.push("#"+i);
    }
  }

  panelOpened() {
    if (this.viewport && this.autocompleteInput) {
      const activeOptionIndex = this.options.indexOf(this.autocompleteInput.nativeElement.value);
      if (activeOptionIndex !== -1) {
        this.viewport.scrollToIndex(activeOptionIndex);
      }
    }
  }
}