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

Question

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

但我想通过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。