如何使虛擬滾動工作與ngFor指令離子2

我有，我想重複的卡片，爲我用ngFor，但因爲我不知道我一定有多少卡將被重複，它會因負載不同而不同，我想實現虛擬滾動以包含潛在的大量溢出。我嘗試過的幾件事不起作用。這是我最近的嘗試。如何使虛擬滾動工作與ngFor指令離子2

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

來源

2017-06-06 Spilot

你想虛擬卷軸使用'離子卡'？或我誤解.. –

@suraj我的卡陣列，我想包含虛擬滾動內的卡的潛力溢出.. – Spilot

，現在你似乎是循環twice..you要在每個項目相同的列表列表是一張卡的權利？ –

你不必使用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>

來源

2017-06-06 05:13:45

ng-template給我一個終端錯誤。單獨使用模板沒有給我一個終端錯誤，但我的頁面根本沒有渲染。只有白色屏幕。該錯誤表明我可能需要導入某些內容才能使ng-template工作，但它沒有指定。 – Spilot

嘗試使用'div'然後而不是'ng-template' .. –

我試過了，而且我仍然只能看到白色屏幕。我在終端中沒有收到任何編譯錯誤，但頁面不會顯示，因此我不知道如何指出錯誤。 – Spilot

如何使虛擬滾動工作與ngFor指令離子2

回答

相關問題