キーボードの矢印で選択した要素の角4の火災クリックイベント

Question

現在、私はリストの各メッセージを矢印キーを上下に押してcssクラス "message-list-active"を適用することができます。行をクリックすると、関数をクリックしてメッセージオブジェクトを渡します。しかし、矢印キーを押したときに要素をクリックしないようにすると、#fireをクリックしようとしましたが、最初の要素をクリックして「次のリストに移動できます。

app.html

<div #fire *ngFor="let message of messages; let i=index" 
      (click)="addMessage(message); activeIndex = i" 

    [ngClass]="{'message-list-active': activeIndex === i }"> 
    {{message}} 
    </div> 

component.ts

messages; // we have date stored here 
activeIndex = 0; 

    onAddtoMessage(message) { 
    message.active = !message.active; 

} 

    @ViewChild('fire') fileInput: ElementRef; 

    @HostListener("document:keydown", ['$event']) 
    doSomething(event: KeyboardEvent): void { 


    if (event.code == "ArrowUp" && this.activeIndex > 0) { 
     this.activeIndex-- 
     this.fileInput.nativeElement.click() 
    } 
    if (event.code == "ArrowDown" && this.activeIndex < this.messages.length - 1) { 
     this.activeIndex++ 
     this.fileInput.nativeElement.click() 
    } 
    } 

/キーを矢印キーを上下に使用して、選択した行（オブジェクト）に機能をクリックし発射する方法は？ [OK]を

Answer 1

はとてもIDに結合することによって、それを考え出したので、あなたは、idで要素を取得し、クリックを適用し、最初のIDを設定し

<div id="{{i}}" *ngFor="let message of messages; let i=index" 
     (click)="addMessage(message); activeIndex = i" 
     [ngClass]="{'message-list-active': activeIndex === i }"> 
     {{message}} 
</div> 

component.ts

if (event.code == "ArrowUp" && this.activeIndex > 0) { 
    this.activeIndex-- 
    document.getElementById(this.activeIndex.toString()).click(); 
} 
if (event.code == "ArrowDown" && this.activeIndex < this.messages.length - 1) { 
    this.activeIndex++ 
    document.getElementById(this.activeIndex.toString()).click(); 
    } 
}