获取元素源焦点 angular

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
}

Error: Cannot read property 'target' of undefined

我试过这样

<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"];


}

link 对于 fiddle ： https://plnkr.co/edit/b5jJxx1xsPpjSZEW93wq?p=preview

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

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 期望在关闭 <div> 标记之前为自动完成选择一个关闭 </kendo-autocomplete> 选择器标记。

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

更新了插件：https://plnkr.co/edit/2teVCt94w3Es0lzyQWMX?p=preview

获取元素源焦点 angular

get element source focus angular

javascript

angularjs

typescript

kendo-ui-angular2