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

Question

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

<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

Answer 1

这可以通过利用自动完成的重置方法来实现。 (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();
      }
}

我还 fork 了你的Plunker .