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
Reactive form tipizzati con modellazione del FormBuilder in Angular
Installare le Web App site extension tramite una pipeline di Azure DevOps
Usare le collection expression per inizializzare una lista di oggetti in C#
Utilizzare la libreria Benchmark.NET per misurare le performance
Monitorare i server on-premises con Azure Arc
Eseguire operazioni con timeout in React
Creare moduli CSS in React
Miglioramenti nell'accessibilità con Angular CDK
Limitare le richieste lato server con l'interactive routing di Blazor 8
Miglioramenti agli screen reader e al contrasto in Angular
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Routing statico e PreRendering in una Blazor Web App