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
Utilizzare AAD su SQL Database durante lo sviluppo con Visual Studio
Visualizzare un template durante il caricamento di Virtualize in Blazor
Creare automaticamente una relazione padre-figlio tra work item in Azure DevOps
Creare un effetto di ombra sui controlli della Universal Windows Platform
Effettuare l'upload di un file da Blazor su Azure Blob Storage
Creare una direttiva per assegnare gli stili a un controllo in Angular
Abilitare Hot Module Replacement in Angular
Progressive Web Apps with React
Utilizzare un web worker in Angular
Keep Calm and Distributed Tracing
Introdurre la security nelle best practice di (Azure) DevOps
Implementare logiche di validazione complesse nelle EditForm di Blazor
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un record in C#
- il 18/02 c'è il #container & #devops day! https://aspit.co/ContainerDevOpsDay-21 Le iscrizioni sono sempre aperte e la Call For Paper è attiva fino al 28/01! #aspilive #cfp
- Winget: un nuovo package manager per Windows
- Attesa e validazione manuale nelle pipeline YAML di Azure DevOps
- Utilizzare il CSS Grid Model per creare il layout di un sito
- Montare una file share con Azure Container Instance