ionic 4 virtual scroll not working

Question

I created new project with Ionic 4. I have an array of item (spaces) in typescript file and I want to show them in template file by Ionic virtual scroll:

    <ion-list [virtualScroll]="spaces" approxItemHeight="320px">
      <ion-card *virtualItem="let space">
        <div>
          <ion-img [src]="space.picture"></ion-img>
        </div>
        <ion-card-header>
          <ion-card-title>{{ space.place}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>{{ space.price}}</ion-card-content>
      </ion-card>
    </ion-list>

But I get an error with Ionic virtual scroll:

Can't bind to 'virtualScroll' since it isn't a known property of 'ion-list'.

What wrong with my code. Please help me, Thanks.

Answer 1

I was facing the same issue, and after a lot of digging through the v4 beta docs and the issues on GitHub, I found that your syntax (and mine) wasn't right: the parent should be an <ion-virtual-scroll> component with an [items] property binding, rather than an <ion-list> with a [virtualScroll] property binding.

<ion-virtual-scroll [items]="spaces" approxItemHeight="320px">
  <ion-card *virtualItem="let space">
    <div>
      <ion-img [src]="space.picture"></ion-img>
    </div>
    <ion-card-header>
      <ion-card-title>{{space.place}}</ion-card-title>
    </ion-card-header>
    <ion-card-content>{{space.price}}</ion-card-content>
  </ion-card>
</ion-virtual-scroll>