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

Question

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

ButI希望通过放置在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

如果您正在尝试使用Up/Down按钮选择选项，您可以执行类似以下操作。

使用[(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和click Up将选择最后一个选项，而当单击undefined和Down时将选择第一个选项。

检查此plunker。