키보드 화살표로 선택한 요소에 각도 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() 
    } 
    } 

어떻게 선택된 행 (객체)에 기능을 클릭 해고? 좋아

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(); 
    } 
}