Je viens d’utiliser l’entrée de l’événement et cela a fonctionné comme suit:

dans le fichier .html:

dans le fichier .ts:

 onSearchChange(searchValue : ssortingng ) { console.log(searchValue);} 

Utilisez ngModelChange en décomposant la syntaxe [(x)] en ses deux parties, à savoir la liaison de données de propriétés et la liaison d’événements:

  {{mymodel}} 

 valuechange(newValue) { mymodel = newValue; console.log(newValue) } 

Cela fonctionne aussi pour la touche de retour arrière.

  {{mymodel}} 

L’événement (keyup) est votre meilleur pari.

Voyons pourquoi:

1. (change) comme vous l’avez mentionné, les déclencheurs ne sont que lorsque l’entrée perd le focus, et est donc d’une utilité limitée.
2. (pression de touche) se déclenche sur les appuis sur les touches mais ne se déclenche pas sur certaines frappes de touches, telles que le retour arrière.
3. (keydown) se déclenche chaque fois qu’une touche est enfoncée. D’où toujours un retard d’un caractère; comme il obtient l’état de l’élément avant l’enregistrement de la frappe.
4. (keyup) se déclenche à chaque fois qu’un événement push de clé est terminé, ce qui inclut également le caractère le plus récent.

Donc (keyup) est le plus sûr à utiliser car il …

• enregistre un événement à chaque frappe, contrairement à l’événement (changement)
• n’a pas de décalage contrairement à l’événement (keydown)
• inclut les touches que (touche de touche) ignore

L’événement secret qui maintient la synchronisation angular de ngModel est l’ entrée d’ appel d’événement. Par conséquent, la meilleure réponse à votre question devrait être:

  {{mymodel}} 

Une autre façon de traiter ces cas est d’utiliser formControl et de vous abonner à valueChanges lorsque votre composant est initialisé, ce qui vous permet d’utiliser les opérateurs rxjs pour des exigences avancées telles que les requêtes http, valeur et omettre précédent, …

 import {Component, OnInit} from '@angular/core'; import { FormControl } from '@angular/forms'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; @Component({ selector: 'some-selector', template: `  ` }) export class SomeComponent implements OnInit { private searchControl: FormControl; private debounce: number = 400; ngOnInit() { this.searchControl = new FormControl(''); this.searchControl.valueChanges .pipe(debounceTime(this.debounce), distinctUntilChanged()) .subscribe(query => { console.log(query); }); } } 

archive .ts

 myMethod(value:ssortingng){ ... ... } 

Ce que vous cherchez est

  {{mymodel}} 

Ensuite, faites ce que vous voulez avec les données en accédant à la liaison this.mymodel dans votre fichier .ts.