web-dev-qa-db-ja.com

ionic 4仮想スクロールが機能しない

Ionic 4.で新しいプロジェクトを作成しました。TypeScriptファイルに項目(スペース)の配列があり、Ionic virtualでテンプレートファイルに表示しますスクロール:

    <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 virtual scroll:

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

コードの何が問題になっていますか。助けてください、ありがとう。

6
Nhan

私は同じ問題に直面していました、そして v4 beta docsGitHubの問題 を何度も調べた後、私はあなたの構文(そして私のもの)が右:親は<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>
14
Joris