从其他控件中选择kendo-combobox项目

Question

我有kendo-combobox。当焦点位于kendo-combobox时，Keyboard navigation works very well。

但我想通过位于kendo-combobox附近的按钮选择下一个可用项目。让我展示一下我的代码：

HTML：

<p>Favorite sport:</p>  
<kendo-combobox [data]="listItems" [allowCustom]="true" #superComboBox>
</kendo-combobox>

<button (click)="selectUpperItem()">
    Up
</button>
<button (click)="selectLowerItem()">
    Down
</button>

的JavaScript

public listItems: Array<string> = 
[
   "Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", 
   "Tennis", "Volleyball"
];

selectUpperItem(){
   //pseudocode: this.superComboBox.nextUpperItem();    
   //How can I accomplish this?
}

selectLowerItem(){
   //pseudocode: this.superComboBox.nextLowerItem();    
   //How can I accomplish this?
}

控件如下所示：

因此，例如，当我点击Up按钮时，应在kendo-combobox处选择下一个可用项目。

是否可以通过位于kendo-combobox附近的按钮选择下一个可用项目？

Answer 1

如果您尝试使用向上/向下按钮选择选项，则可以执行以下操作。

使用[(ngModel)]跟踪当前选择：

<kendo-combobox 
    [data]="listItems" 
    [allowCustom]="allowCustom" 
    [(ngModel)]="currentSelection">
</kendo-combobox>

然后在.ts检查currentSelection是否为undefined，并相应地操纵选择/索引：

private string: currentSelection;
private number: currentIndex;

private selectUpperItem() {
  if (this.currentSelection == undefined) {
    this.currentSelection = this.listItems[this.listItems.length - 1];
    this.currentIndex = this.listItems.length - 1;
  } else {
    this.currentIndex = this.listItems.indexOf(this.currentSelection);
    this.currentSelection = this.listItems[this.currentIndex - 1];
  }
}

private selectLowerItem() {
  if (this.currentSelection == undefined) {
    this.currentSelection = this.listItems[0];
    this.currentIndex = 0;
  } else {
    this.currentIndex = this.listItems.indexOf(this.currentSelection);
    this.currentSelection = this.listItems[this.currentIndex + 1];
  }
}

设置为undefined，然后点击向上将选择最后一个选项，点击undefined和向下时将选择第一个选项。

选中plunker。