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

Question

我正在使用 Kendo 自动完成 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);
    }

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

Answer 1

这可以通过使用 auto-complete 的 reset 方法来实现。 (Reference)

您可以通过组件中的 ViewChild 装饰器访问 auto-complete，并且每个 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。

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

How to reset the text in kendo autocomplete after selection

autocomplete

kendo-ui

kendo-ui-angular2

angular