javascript - 获取元素源焦点 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"];


}

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 期望收盘 </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>

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