A volte capita di a vere una lista con moltissimi oggetti e i doverli mostrare all'utente. Sebbene paginare questi dati o caricarli solo su richiesta è sicuramente una buona scelta, questa strada non è sempre percorribile.
Renderizzare centinaia o migliaia di elementi renderebbe la pagina molto lenta al limite dell'inusabile. In questi casi può tornare utile la funzionalità di scrolling di Angular CDK. Questa funzionalità virtualizza lo scrolling renderizzando solo gli elementi visibili, alcuni elementi prima e alcuni elementi dopo. Mentre scrolliamo gli elementi, in base alla posizione dello scrolling la funzionalità calcola quali elementi della lista devono essere renderizzati e li mette in binding con quelli già creati sostituendone quindi i dati. In questo modo il binding è velocissimo in quanto si riusano sempre gli stessi elementi cambiandone solo il binding. Il prossimo codice mostra un esempio di utilizzo della funzionalità.
<cdk-virtual-scroll-viewport itemSize="30"> <div *cdkVirtualFor="let item of items">{{item}}</div> </cdk-virtual-scroll-viewport>
Il component cdk-virtual-scroll-viewport è il contenitore degli elementi, mentre la direttiva cdkVirtualFor è come ngFor, ma virtualizzata. La proprietà itemSize è molto importante in quanto specifica che ogni elemento è alto 30 pixel e quindi il processo di calcolo degli elementi da visualizzare in base alla posizione dello scrolling è estremamente veloce.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Eseguire operazioni sui blob con Azure Storage Actions
Gestire i null nelle reactive form tipizzate di Angular
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Sostituire la GitHub Action di login su private registry
Le novità di Angular: i miglioramenti alla CLI
Generare file PDF da Blazor WebAssembly con iText
Eseguire le GitHub Actions offline
Evitare la script injection nelle GitHub Actions
Utilizzare la libreria Benchmark.NET per misurare le performance
Usare una container image come runner di GitHub Actions
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework