选择后如何重置剑道自动完成中的文本

【问题标题】：How to reset the text in kendo autocomplete after selection选择后如何重置剑道自动完成中的文本
【发布时间】：2018-08-07 22:03:43
【问题描述】：

我正在使用 Angular 4 的剑道自动完成功能，我试图在从弹出窗口中选择值后清除自动完成框中的文本。

<div class="example-wrapper">
  <kendo-autocomplete [data]="listItems" [value]="country" 
  [placeholder]="'e.g. Andorra'" (valueChange)="locationValueChange($event)">
  </kendo-autocomplete>

  <div *ngFor="let location of selectedValues; let i = index;">
                {{location}}
            </div>
</div>




public listItems: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];


     public country: string = "Austria";

     public selectedValues: Array<string[]> = [];


     public locationValueChange(value: any): void {
       this.selectedValues.push(value);
       this.country='';
       console.log(this.country);
    }

即使我将值字段设置为无。它仍然有数据在框中。请提出任何想法来实现这一目标。 Plunker link of code

【问题讨论】：

标签： angular kendo-ui autocomplete kendo-ui-angular2

【解决方案1】：

这可以通过使用自动完成的reset 方法来实现。 (Reference)

您可以通过组件中的ViewChild 装饰器访问自动完成功能，并在每个valueChange 运行reset 方法。

*.component.html

 <kendo-autocomplete
      #autocomplete
      [data]="data"
      [value]="value" 
      (valueChange)="onValueChange($event)">
 </kendo-autocomplete>

*.component.ts

 @Component({ ... })
 public class MyComponent {
      @ViewChild('autocomplete') autocomplete: AutoCompleteComponent;

      ...

      onValueChange(value: string){
          this.autocomplete.reset();
      }
}

我还分叉了你的Plunker。

【讨论】：