获取元素源焦点角度

Question

如何获得焦点元素。

<kendo-autocomplete (focus)="relationsFocusAutoComplete($event.target)" 
 [(ngModel)]="vehicle.relation" name="relation-{{i}}">
</kendo-autocomplete>

零件

relationsFocusAutoComplete(value: any) {
   console.log(value); //This is throws target undefined error
}

错误：无法读取未定义的属性“target”

我试过这样的

<kendo-autocomplete (focus)="relationsFocusAutoComplete($event)" 
 [(ngModel)]="vehicle.relation" name="relation-{{i}}">
</kendo-autocomplete>

 relationsFocusAutoComplete(value: any) {
   console.log(value); //This is also undefined
}

这是Kendo-Autocomplete生成在*ngFor如果需要我将包括部分

Issue in plunker

Kendo-Autocomplete

Answer 1

您可以使用模板变量访问自动完成组件并使用toggle()方法显示focus上的自动完成下拉列表并使用以下代码将其隐藏在blur上

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
 <kendo-autocomplete #auto
     [data]="listItems"
     [placeholder]="placeholder"
     (focus)="auto.toggle()"
 >
`
})
export class AppComponent {
  public placeholder: string = 'Type "it" for suggestions';
  public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];


}

小提琴链接：https://plnkr.co/edit/b5jJxx1xsPpjSZEW93wq?p=preview

编辑：对于带有* ng的多个自动完成组件，您可以在下面使用，不确定这是否是您要查找的内容

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `

     <kendo-autocomplete *ngFor="let member of inputs;" #auto
     [data]="listItems"
     [placeholder]="placeholder"
     (focus)="auto.toggle()">
`
})
export class AppComponent {
  public placeholder: string = 'Type "it" for suggestions';
  public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
  public inputs : any = ['first item','second item','third item','fourth item'];


}

编辑2：您在plunker中提到的错误主要是由于plunker本身的语法检查问题

你可以使用下面的模板。实际上，plunker期望在关闭</kendo-autocomplete>标签之前关闭自动填充的<div>选择器标签。

   <div *ngFor="let item of inputs; let i = index">
        <kendo-autocomplete #auto [data]="listItems" 
           [placeholder]="placeholder" (focus)="auto.toggle()">
        </kendo-autocomplete>
    </div>

更新的plunker：https://plnkr.co/edit/2teVCt94w3Es0lzyQWMX?p=preview