Angular 4 fire click event auf Element ausgewählt durch Tastatur Pfeile

Question

Im Moment kann ich jede Nachricht in der Liste mit der css-Klasse "message-list-active" durch Drücken der Pfeiltasten auf und ab gehen. Wenn ich auf Zeile klicke, triggere ich Klick-Funktion und übergebe Nachrichtenobjekt. Aber scheint nicht zu klicken klicken auf das Element beim Drücken der Pfeiltasten, ich habe versucht, klicken Sie durch #fire, aber es klickt nur das erste Element und gewann 'erlauben mir, auf die nächste Liste zu gehen.

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

Wie auf ausgewählte Zeile klicken Funktion Feuer (Objekt) Pfeiltaste/Taste gedrückt mit bis?

Answer 1

Ok dachte es so aus, indem zu id-Bindung, so dass Sie Element von ID erhalten und einen Klick anwenden, stellen Sie zuerst eine 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(); 
    } 
}