离子4虚拟滚动不起作用

Question

我用Ionic 4创建了一个新项目.我在typescript文件中有一个项目(空格)数组,我想通过Ionic虚拟滚动在模板文件中显示它们:

    <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>

但是我在离子虚拟滚动时遇到错误:

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

我的代码有什么问题.请帮帮我,谢谢.

Answer 1

我遇到了同样的问题,经过大量挖掘v4 beta文档和GitHub上的问题后,我发现你的语法(和我的)不正确:父语句应该是一个<ion-virtual-scroll>具有[items]属性绑定的组件,而不是比<ion-list>具有[virtualScroll]属性绑定.

<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>