Benutzerdefinierte Methode wird nur einmal in der addEventListener-Methode ausgelöst?

Ich versuche das "oninput" -Ereignis des Eingabebereichselements an eine benutzerdefinierte Methode zu binden, die in der entsprechenden Typoskriptdatei deklariert ist.Benutzerdefinierte Methode wird nur einmal in der addEventListener-Methode ausgelöst?

Im Anschluss an das HTML-Element:

<input type="range" id='motivation-grade' value="3" min="1" max="5">

Dies ist der Code-Ereignis-Listener, die ich in ngOnInit Methode meiner angular2 Komponente bin mit:

ngOnInit() { 
    this.elem = document.getElementById('motivation-grade'); 
    this.elem.addEventListener("click", this.motivation(document.getElementById('motivation-grade').value)); 
    }

Hier in Motivation (str: String) Methode, ich möchte einige Links basierend auf ausgewählten Wert jedes Mal zeigen, wenn Benutzer es ändert. Aber die motivation() Methode feuert nur einmal beim Starten und danach scheint es nicht getroffen zu werden. Kann mir jemand helfen zu verstehen, was mir fehlt?

Quelle

2017-01-12 Jayant Pareek

gespeichert werden, die 'ngOnInit' – brk

Ist' this.motivation' Rückkehr ruft eine Funktion? Wenn nicht, dann ist dies ein Duplikat von [Wie übergebe ich den Parameter an die Funktion 'addEventListener'?] (Http://stackoverflow.com/q/12024483/4642212). – Xufox

@ Xufox ist richtig. Sie sollten auch direkte DOM-Manipulation mit Winkel 2 vermeiden. – n00dl3

Ich vermute, dass Sie Angular2 verwenden. Wenn Sie ein Ereignis bei Eingabe-Klick auslösen möchten, können Sie so etwas tun.

<input type="range" id='motivation-grade' (click)="onInputClick(3)" value="3" min="1" max="5">

Ihre Komponente Typescript-Datei kann dies enthalten.

public onInputClick(value){ 
    //do something ... 
}

Try direkte DOM-Manipulation in Angular 2. Es ist eine schlechte Praxis

Quelle

2017-01-12 16:22:38

Danke Rudra, aber ich bekomme 'undefiniert', wenn Sie versuchen, den Wert auf Ihrem Weg zu erreichen. Irgendwelche Vorschläge ? –

@Jayant Sie müssen den tatsächlichen Wert übergeben, wenn Sie die Eingabe verwenden (klicken). Es kann entweder eine Variable oder der tatsächliche Wert sein, den Sie in diesem Fall übergeben möchten (click) = "onInptClick (3)" –

Aber dann beendet es den Zweck dieser Funktion, richtig? Ich brauche den aktualisierten Wert jedes Mal, wenn der Benutzer es ändert. Übrigens habe ich das Problem gelöst, indem ich var self = this in meinem ngOnInit verwendet habe und es dann in meiner addEventListener-Funktion verwendet habe. Danke für die Hilfe. –

Vermeiden Sie direkte dom Manipulation zu vermeiden. Wie Rudraprasad Verwendung vorgeschlagen
<input type="range" id='motivation-grade' (click)="onInputClick($event)" value="3" min="1" max="5">
können Sie das Ereignis drucken mit
onInputClick(event):void{ console.log(event); } höchstwahrscheinlich den gewünschten Wert in event.target.value

Quelle

2017-01-12 18:56:15

Benutzerdefinierte Methode wird nur einmal in der addEventListener-Methode ausgelöst?

Antwort

Verwandte Themen