来自其他控件的 kendo-combobox 的 Select 项

Question

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

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

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 按钮时，下一个可用项目应该 select 在 kendo-combobox 处编辑。

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

Answer 1

如果您尝试使用 Up/Down 按钮 select 选项，您可以执行以下操作。

使用[(ngModel)]追踪电流select离子：

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

然后在您的 .ts 中检查 currentSelection 是否为 undefined 并相应地操作 selection/index：

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。