Una delle dipendenze principali di Angular è RxJS (Reactive Extensions) la cui classe principale Observable viene largamente usata in molte parti del codice. Uno dei punti in cui Observable viene usata è nella proprietà valueChanges della classe FormControl che fa parte del modulo ReactiveFormsModule. Questa proprietà invia al sottoscrittore dell'observable un messaggio con il contenuto della textbox ogni volta che il valore della textbox cambia. Questo significa che se ci sottoscriviamo alle notifiche pubblicate dalla proprietà valueChanges, riceviamo una notifica per ogni volta che l'utente digita un carattere nella textbox.
In una form di ricerca questo evento può essere utile perchè al cambio del campo di ricerca dobbiamo aggiornare i dati. Se lanciamo l'algoritmo di ricerca ogni volta che l'utente cambia il campo rischiamo di lanciare l'algoritmo molte volte in modo inutile in quanto il risultato che ci interessa è solo l'ultimo. Inoltre, se l'algoritmo di ricerca prevede chiamate al server, effettueremmo molte chiamate inutili visto che è solo l'ultima che ci serve. In questi casi ci possono venire in aiuto gli operatori di RxJS debounceTime, distinctUntilChanged e switchMap. Il primo fa in modo che la notifica venga inviata ai sottoscrittori non subito ma solo dopo un tempo specificato in millisecondi, il secondo fa in modo che passato il debounce time, venga inviato l'evento solo se il valore della texbox è cambiato mentre il terzo annulla i risultati delle precedenti eventuali chiamate tornando al sottoscrittore solo il l'ultimo risultato.
this.fc.valueChanges .pipe( debounceTime(200), distinctUntilChanged(), switchMap(e => invokeService(e)) ) .subscribe(e => doSomething());
In questo esempio, la notifica viene inviata ogni 200 millisecondi e solo se il valore è cambiato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Come migrare da una form non tipizzata a una form tipizzata in Angular
Configurare policy CORS in Azure Container Apps
Definire stili a livello di libreria in Angular
Gestire i null nelle reactive form tipizzate di Angular
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Utilizzare politiche di resiliency con Azure Container App
Utilizzare database e servizi con gli add-on di Container App
Installare le Web App site extension tramite una pipeline di Azure DevOps
Creare form tipizzati con Angular
Usare lo spread operator con i collection initializer in C#
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Utilizzare Model as a Service su Microsoft Azure