在 Angular 7+ 上使用 Enter 键移动到 ng-template 下的下一个字段-解网

问：

我得到以下信息：Cannot read properties of undefined (reading 'focus')

因此，我控制台记录了nextField.nativeElement ，使用console.log（nextField.nativeElement）并未定义

我的 .html 文件：

<ng-template #myTemplate>
  <table>
    <tr>
      <td>
        <input (keydown.enter)="onEnterPressed($event, input2)" #input1 />
      </td>
    </tr>
    <tr>
      <td>
        <input #input2 />
      </td>
    </tr>
  </table>
</ng-template>

我的.ts文件：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  @ViewChild('input1') input1: ElementRef;
  @ViewChild('input2') input2: ElementRef;

  onEnterPressed(event: KeyboardEvent, nextField: ElementRef): void {
    if (event.key === 'Enter') {
      event.preventDefault(); 

      nextField.nativeElement.focus();
    }
  }
}

我期待当我的鼠标指针进入 input1 时，我使用键盘点击“Enter”键，它将移动到 input2。

角度焦点指令 Enter

<!--as you use input2, you pass an HTMLElement-->
<input (keydown.enter)="onEnterPressed($event, input2)" #input1 />
<input #input2 />
//e.g.
{{input2.value}}

  //see that received as argument an "Event" and an HTMLElement
  onEnterPressed(event: Event, nextField: HTMLElement): void {
    if ((event as KeyboardEvent).key === 'Enter') {
      event.preventDefault(); 

      nextField.focus();
    }
  }

（1）当模板引用变量应用于HTML标签时，如果你在一个组件中使用模板引用变量就是这个组件，如果html标签有一个指令，我们可以用“exportAs”

<div my-directive #templateRef="MyDirective">

上一个：Xamarin 项目始终在我的库中输入NETSTANDARD2_0指令

下一个：Visual Studio 中的全局忽略拼写指令

在 Angular 7+ 上使用 Enter 键移动到 ng-template 下的下一个字段

Using Enter key to move to the next field under ng-template on Angular 7+

评论