我如何在角度应用程序中使用删除按钮和键盘上的上下按钮

Question

我正在尝试构建待办事项应用该应用程序具有要完成的任务列表这些任务也可以删除该应用程序可以通过鼠标单击正常运行我如何使应用程序响应按键

我想让应用程序在按下箭头键时在列表中显示并在按下向上箭头时上升]

按下键时将焦点放在元素上

一旦聚焦，我必须能够按Enter键将任务标记为已完成，然后按Delete键删除任务

app.html

<input type="text" class="todo-input" placeholder="What needs to be done" [(ngModel)]="todoTitle" (keyup.enter)="addTodo()">
<todo-item *ngFor="let todo of todoService.todosFiltered()" [todo]="todo">
 </todo-item>

todo-item.html

<div class="todo-item">
<div class="todo-item-left">
<input type="checkbox" [(ngModel)]="todo.completed">
<div  class="todo-item-label" [ngClass]="{ 'completed' : todo.completed }"{{ todo.title }}</div>

</div>
<div class="remove-item" (click)="todoService.deleteTodo(todo.id)" >
&times;
</div>
</div>

Answer 1

在您的* ngFor中，当您按下向下箭头按钮时，可以使用(keydown.arrowup)=clickArrowup($event)进行向上箭头处理，并按下(keydown.arrowdown)=clickArrowdown($event)进行事件处理键向下事件。同样，您可以使用(keydown.enter)=clickEnter($event)的Enter按钮处理事件，并使用(keydown.backspace)=clickBackspace($event)进行删除。

Answer 2

您可以使用@HostListeners来监听键盘事件并根据需要使用它。