Question

我正在使用带有角度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

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

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

<强> *。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自动完成中的文本

1 个答案: