ionic 4虚拟滚动不起作用答案

【问题标题】：ionic 4 virtual scroll not workingionic 4虚拟滚动不起作用
【发布时间】：2020-11-27 12:49:38
【问题描述】：

我使用 Ionic 4 创建了新项目。我在打字稿文件中有一组项目（空格），我想通过 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>

但 Ionic 虚拟滚动出现错误：

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

我的代码有什么问题。请帮助我，谢谢。

【问题讨论】：

标签： virtualscroll ionic4

【解决方案1】：

我遇到了同样的问题，在对v4 beta docs 和issues on GitHub 进行了大量挖掘之后，我发现您的语法（和我的）不正确：父组件应该是<ion-virtual-scroll> 组件带有[items] 属性绑定，而不是带有[virtualScroll] 属性绑定的<ion-list>。

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

【讨论】：