Question

我有一个组合框，它不显示一个列表，而是显示两个不同的列表（ul / li），并且我想在这些列表中实现基于箭头键的导航（不幸的是，所涉及的代码太大，无法用作工作示例）：

[...SearchTerm...]
| List A:        |
| Element A1     |
| Element A2     |
|                |
| List B:        |
| Element B1     |
| Element B2     |
+----------------+

我已经通过使用跨越两个列表的索引（基本上将它们视为一个大列表）来实现选择

component.ts：

navigate($event) {

    if ($event.key === 'ArrowUp') {
        ...
        this.selectedListValuePosition--;
        ...
    } else if ($event.key === 'ArrowDown') {
        ...
        this.selectedListValuePosition++;
        ...
    }
}

component.html：

<form [formGroup]="formGroup">

    <div class="combobox-wrapper">

        <input type="text" ... (keydown)="navigate($event)">

        <li *ngFor="let item of itemsA; let i = index" [value]="item"        
         ...
        [class.selected]="listElementIsSelected('ListA', i)">

        <li *ngFor="let item of itemsB; let i = index" [value]="item"
         ...
        [class.selected]="listElementIsSelected('ListB', i)">

    </div>
</form>

因此，当我按箭头键时，可以正确“选择”元素。但是，我现在的问题是，由于它不仅是一个列表，而且实际上是两个列表，滚动不再自动进行。因此，如果我向下导航列表，并且屏幕上的元素多于屏幕上的空间，则列表不会随着所选列表项向下滚动-基本上是从视图中导航出来。

我的第一种方法是定位标记为“选定”的元素，然后将其滚动到视图中：

const targetLi = <HTMLElement>document.getElementsByClassName('selected')[0];
targetLi.scrollIntoView();

但是不幸的是，这有点偏离，并且当列表中最外面的元素被选中时，它根本不会滚动，给我的印象是这是行不通的。

我希望对此有所投入！

Angular 5，在具有两个列表的组合框中导航

0 个答案: