Wie ruft man eine Methode auf, wenn der Modellwert mit ngModelChange in Angular 2 aktualisiert wird?

Question

Ich habe unten Code verwendet, um eine Methode aufzurufen, wenn der Modellwert mit ngModelChange Event geändert wurde.

app.component.ts: -

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <input type="text" [(ngModel)]="name" (ngModelChange)="onModelChanged()"/> 
    <input type="button" value="Submit" (click)="updateModelValue()"/> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    updateModelValue() { 
    this.name = `Angular 2! v${VERSION.full}` 
    } 
    onModelChanged() { 
    alert('Model Changed'); 
    } 
} 

Demo: -https://plnkr.co/edit/4WosE8e3G822qbxVKJER?p=info

Wenn ich drücken eine Taste von der Tastatur, zu diesem Zeitpunkt ngModelChange Ereignis gefeuert wurde. Wenn ich jedoch den Modellwert über die Schaltfläche "Ereignis klicken" aktualisiere, wurde zu diesem Zeitpunkt das ngModelChange-Ereignis nicht ausgelöst. Wie wird eine Methode aufgerufen, wenn der Modellwert mit ngModelChange Event geändert wurde?

Answer 1

Um zu klären, basierend auf Ihren Kommentaren in der anderen Antwort (jetzt gelöscht), den Grund, warum ngModelChange Ereignis, wenn Sie nicht Auslösen click die Taste ist, weil ngModelChange Ereignis nur eine Output() Eigenschaft der ngModel Richtlinie ist. Damit dieses Ereignis ausgelöst wird, muss die Direktive ngModel in Ihrem html-Element vorhanden sein, und es wird ihm (wie in [(ngModel)]="name") der Wert zugewiesen, der durch ngModelChange aktualisiert wird. Daher haben Sie in Ihrem ersten input Element richtigerweise ngModel und seine Ausgabeeigenschaft ngModelChange verwendet, aber in der button typisiert input, können Sie nicht das gleiche Verhalten erwarten.

Ich hoffe, es macht Sinn. Bitte überprüfen Sie diese Links, docs & source, für weitere Informationen.

Answer 2

Sie können Eingabeereignis in den Click-Handler auslösen, siehe unten:

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     <input #nameInput type="text" [(ngModel)]="name" (ngModelChange)="onModelChanged()"/> 
     <input type="button" value="Submit" (click)="updateModelValue()"/> 
     </div> 
    `, 
    }) 
export class App { 
    name:string; 
    @ViewChild('nameInput') nameInput:ElementRef; 
    constructor() { 
     this.name = `Angular! v${VERSION.full}` 
    } 
    updateModelValue() { 
     const name = `Angular 2! v${VERSION.full}`; 
     this.nameInput.nativeElement.value = name; 
     this.nameInput.nativeElement.dispatchEvent(new Event('input')); 
    } 
    onModelChanged() { 
     alert('Model Changed'); 
    } 
}