javascript - hur man får virtuell scrollning att fungera med ngFor-direktivet i ionic 2

Jag har ett kort som jag vill upprepa, för det använder jag ngFor, men eftersom jag inte kommer att veta med säkerhet hur många kort jag kommer att upprepa, kommer det att variera från gång till gång, vill jag implementera virtuell scroll för att innehålla en potentiellt stor översvämning. De få saker jag har försökt fungerar inte. Detta är mitt senaste försök.

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

Svar #1

Du behöver inte använda ngFor tillsammans med [virtualScroll]. Den sistnämnda gör loopningen.

Jag skulle försöka använda ng-template för att ställa in virtuell rullning.

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