如何通过使用角度2中的@HostListener从键盘上按Delete键来删除任何元素的ID，以将其删除？

问题描述

在这里，我试图通过按键盘上的Delete键从数组中删除一个框。下面是我的以下代码。

在HTML中。

<button type="button" (click)="generate()">Click Me!</button>

<div *ngFor="let Box of Boxes; let i = index">
    <div class="myDiv" [ngClass]="{'active': active == i}" (click)="activeBox(i)"  name="{{i}}" >
        <p>{{i}}</p>
    </div>
</div>

在组件中

 generate() {
    this._Boxes.push( new BoxClass() );
}

activeBox( id: any ) {
    this._active = id;
}

@HostListener( 'document:keydown.delete',['$event'] )
handleKeyboardEvent( event: KeyboardEvent,id: any) {
    if ( event.key === 'Delete' ) {
        this.remove(id);
    }
}

 remove(id) {
     this._Boxes.splice( this._Boxes.indexOf(id),1 );
 }

css文件

.active{
    background: aqua;
}

我无法通过id进行删除，因为它正在删除数组中的最后一个框。有什么方法可以获取id？

并且在生成新框时，类active也显示默认值。我希望仅在单击任何框时才将其激活。上面是我的代码，但是不能按照我的描述进行操作。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）