1

HTML:

<virtual-scroll [items]="items" (update)="viewPortItems = $event">    
                <div *ngFor="let item of viewPortItems">
                  {{item.name}}
                </div>                    
</virtual-scroll>

In component i am initializing the items. Component:

items = [{
        name: 'xyz'
    },
    {
        name: 'xyz'
    },
    {
        name: 'xyz'
    },
    {
        name: 'xyz'
    }
]

But in my page nothing is displayed. viewPortItems is empty.

Priya
  • 1,017
  • 3
  • 15
  • 22

3 Answers3

1

I had the same problem, in my case i solved it but adjusting the height of the virtual-scroll element. You can always debug this kind of behavior in your element tab => adjust element style.

Olalekan J Makanjuola
  • 51
  • 5
0

do like this:

<div *ngFor="let item of viewPortItems" [item]="item">

and make a slight change:

{{item?.name}}
Mohd Tabish Baig
  • 332
  • 2
  • 8
  • If i do like that getting error zone.js:192 Uncaught Error: Template parse errors: Can't bind to 'item' since it isn't a known property of 'div'. ("s = $event"> – Priya May 31 '18 at 12:10
  • yes you are right, no need for `[item]="item"` , i think there is a problem with items initialization – Mohd Tabish Baig May 31 '18 at 12:20
  • My application is angular5. i installed angular2 virtual scroll. Is it the problem? – Priya May 31 '18 at 12:29
  • This has nothing to do with the version. Angular 2 is the same as Angular 2+ or Angular 2-6. Only AngularJS/Angular 1 is not compatible with the later versions. Do you have VirtualScrollModule and CommonModule (for *ngIf) in your module's imports? – Phil May 31 '18 at 13:01
-1

My guess is you are not sizing the virtual scroll container. Any of the virtual scroll implementations don't work if the container is not sized in some way, add style=’height: 300px’ and see if it works..

See https://medium.com/@andrew_54539/virtualization-of-ngfor-welcome-to-the-pure-ngfor-replacement-ngvfor-21254034acbc?source=linkShare-40e7ef73f7e0-1535661741

Anagram4wander
  • 1
  • Welcome to StackOverflow, please read the [How do I write a good answer guide](https://stackoverflow.com/help/how-to-answer) in order to help this user to solve this user. – Laura Aug 30 '18 at 21:14