我用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'.
我的代码有什么问题。请帮助我,谢谢。
答案 0 :(得分:11)
我遇到了同样的问题,在深入研究v4 beta docs和issues on 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>