virtualscroll | 易学教程

Angular virtual scroll: append new items when reaching the end of scroll

阅读更多关于 Angular virtual scroll: append new items when reaching the end of scroll

问题 I would like to use virtual scroll on my Angular application. The items in my list are the result of a remote paged search. I would like to load more results (call the next page) every time I reach the end of the viewport scrolling down. Here is my template: <div class="container"> <cdk-virtual-scroll-viewport itemSize="100"> <li *cdkVirtualFor="let item of searchResult">{{item}}</li> </cdk-virtual-scroll-viewport> </div> Here is my attempts to make it to work as I need: export class

Angular Virtual scroll performance issue on overriding scrollbar styles

阅读更多关于 Angular Virtual scroll performance issue on overriding scrollbar styles

来源： https://stackoverflow.com/questions/62811427/angular-virtual-scroll-performance-issue-on-overriding-scrollbar-styles

cdkVirtualFor not rendering new items

阅读更多关于 cdkVirtualFor not rendering new items

问题 I'm building a vertically scrolling calendar. I'm getting the initial days to load, but when new days are added to the list, they aren't being rendered. <cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="100" (onContentScrolled)="handleScrollChange($event)" > <calendar-day *cdkVirtualFor="let day of days; trackBy: trackByFn" [day]="day" ></calendar-day> </cdk-virtual-scroll-viewport> <button (click)="goToToday()">go</button> I have a service with a BehaviorSubject updating the

cdkVirtualFor not rendering new items

阅读更多关于 cdkVirtualFor not rendering new items

How to set the initial index (position) for the CdkVirtualScrollViewport in Angular 7

阅读更多关于 How to set the initial index (position) for the CdkVirtualScrollViewport in Angular 7

问题 I need the inital position of the cdk-virtual-scroll-viewport to be other than the first element / item of the list. Now I found the scrollToIndex and scrollTo methods, but I only can get them to work when using it in the ngAfterViewChecked , which feels off. Can someone confirm that the using those methods in the ngAfterViewChecked is the right way of doing things? If not, show an alternative method / technique? @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport:

Selenium / Python - How to access / count all elements inside a container that has virtual scrolling

阅读更多关于 Selenium / Python - How to access / count all elements inside a container that has virtual scrolling

问题 I have a cdk-virtual-scroll-viewport container with many elements in it which means not all of its elements are rendered at once. If I scroll, I get more elements and 'lose' the previous ones. What I want to do is to count the children of this container and process its data. I have already done the part for counting and processing and it is working as I had checked with elements that fit in this container without needing to scroll. The problem I have is that because this container doesn't

Adjust height of dropdown menu Angular7 autocomplete with virtual-scroll

阅读更多关于 Adjust height of dropdown menu Angular7 autocomplete with virtual-scroll

问题 I'm using angular-material Autocomplete (version 7) for my application. I'm using <cdk-virtual-scroll-viewport> inside . Besides numerious problems I've resolved, there is one I don't understand: the dropdown menu doesn't display when I add max-height css, and if I add height, it will display but in fixed height. Here is part of my code: html: <mat-form-field class="single-select"> <input matInput #singleInput class="single-input layout flex" type="text" [formControl]="selectControl"

ng2-dragula with a virtual scroll

阅读更多关于 ng2-dragula with a virtual scroll

问题 I am trying to implement ngx-virtual-scroll and ng2-dragula together here is my current Stackblitz UPDATED : Stackblitz The problem is the following : <virtual-scroller #scroll2 [id]="myGroupId" [dragula]="myGroupId" [(dragulaModel)]="myList.list2" [items]="myList.list2" class="virtual-scroller"> <div class="virtual-scroller-element" *ngFor="let card of myList.list2; let i = index ">{{myList.list2[i]}}</div> </virtual-scroller> for Dragula to work, there must be no HTML in between the group

cdk virtualscroll with mat-grid-list

阅读更多关于 cdk virtualscroll with mat-grid-list

问题 Is there an virtual scroll implementation that works with the grid-list? I think the default implementation won't work because each row should have an element around it. I'm using the grid-list to display profile pictures, and need an infinite scroll or preferably virtual scroll to load new ones. 回答1: So since cdk virtualscroll doesn't support multi column, I ended up using ngx-virtual-scroller, which does support multi-columns. The mat-grid-list I also had to let go because of this, but,

cdk virtualscroll with mat-grid-list

阅读更多关于 cdk virtualscroll with mat-grid-list

Is there an virtual scroll implementation that works with the grid-list? I think the default implementation won't work because each row should have an element around it. I'm using the grid-list to display profile pictures, and need an infinite scroll or preferably virtual scroll to load new ones. So since cdk virtualscroll doesn't support multi column, I ended up using ngx-virtual-scroller , which does support multi-columns. The mat-grid-list I also had to let go because of this, but, creating your own tiles isn't that much work when using flexbox. Here's a snippet using multi columns, [users