如何使虚拟卷轴与Ionic 2中的NGFOR指令一起使用

Question

我有一张我想重复的卡负载，我想实现虚拟滚动以包含潜在的大溢出。我尝试过的几件事不起作用。这是我的最新尝试。

<ion-content id="content">

   <ion-card id="card" *ngFor="let event of listOfEvents 
     [virtualScroll]="listOfEvents" >          
          <ion-item *virtualItem="let event"> 
       <ion-row>
                <ion-col><span class="showDetails">Guests Needed:</span> {{event.guests}} </ion-col><ion-col><span class="showDetails">Cover:</span> {{event.coverCharge}}</ion-col><ion-col><span class="showDetails">Drink Min:</span>{{event.drinkMin}} </ion-col>
        </ion-row> 
            </ion-item>
         </ion-card>
    </ion-content >

Answer 1

您不必将ngFor与[virtualScroll]一起使用。后者进行循环。

我会尝试使用ng-template设置虚拟滚动。

<ion-content id="content">
 <ng-template [virtualScroll]="listOfEvents">
   <ion-card id="card" *virtualItem="let event" >          
       <ion-row>
          <ion-col><span class="showDetails">Guests Needed:</span> {{event.guests}} </ion-col>
          <ion-col><span class="showDetails">Cover:</span> {{event.coverCharge}}</ion-col>
          <ion-col><span class="showDetails">Drink Min:</span>{{event.drinkMin}} </ion-col>
        </ion-row> 
    </ion-card>
 </ng-template> 
</ion-content>