Question

我正在使用来自HostListener来自div元素的enter key函数。我的div元素在{2}处的角度为ngFor，我需要将ngFor的索引值传递给HostListener函数。

我的代码：

在HTML中

  <div *ngFor="let Add of Adds; let i = index">
       <div class="data_card"  (keydown)="edit($event,i)">
            {{Add.name}}
      </div>
</div>

在组件中

 @HostListener('document:keydown', ['$event','index'])
  edit(event: KeyboardEvent,index) {
    if (event && event.keyCode === 13) {
      consol.log(index)
    }
}

在这个控制台日志中，我得到索引的未定义值。请建议我如何将此参数传递给此HostListener函数。

提前致谢

Answer 1

您需要做的事情很少：

1）删除外部div并使DIV元素可选 - 添加tabindex属性：

    <div *ngFor="let data of jsondata; let i = index" (keydown)="handleKeyboardEvent($event,i)" tabindex="{{i}}">
        <h2>{{data.data1}}</h2>
    </div

2）将handleKeyboardEvent移至App组件并删除@HostListener绑定：

export class App {
  jsondata:any = [];
  constructor() {...}
  handleKeyboardEvent(event: KeyboardEvent,index): void {

3）添加事件处理代码：

handleKeyboardEvent(event: KeyboardEvent,index): void {
    if (event.keyCode === 13) {
      event.target.nextElementSibling.focus();
    }
}

这是working plunker。

Answer 2

创建指令并传递问题@Input obj: {item: Item, index: number };

然后在@HostListener内使用this.obj

Answer 3

这种方法不起作用。

@HostListener注册函数到事件。（事件）也是如此。
我不确定（keydown）是否存在（或者可以获得额外的参数）。
使用@Hostlistener你无法添加这样的自定义参数。
关于div的keydown闻起来很有趣。

将动态参数传递给角度为2

3 个答案: