Question

我有一张我想要重复使用的卡，因为我使用的是ngFor，但是由于我不确定我会重复多少张卡，因此从加载到加载会有所不同，我想实现虚拟滚动包含可能很大的溢出。我尝试过的一些事情都行不通。这是我最近的尝试。

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

如何使用离子2中的ngFor Directive进行虚拟滚动

1 个答案: