当您拥有一组具有对象数组的对象时，如何实现Ionic2虚拟滚动？

Question

使用Ionic2 / Angular2我想使用虚拟滚动来管理联系人邀请中的一长串联系人。我尝试用[virtualScroll]替换我的* ngFor。

要映射的数组：

# include <stdio.h>
# include <stdlib.h>

static char **args;

// define (slow) functions to calculate each of the needed values
int calculate_A() {
  printf("Calculating value for A\n");
  return atoi(args[1]);
}

int calculate_B() {
  printf("Calculating value for B\n");
  return atoi(args[2]);
}

int calculate_C() {
  printf("Calculating value for C\n");
  return atoi(args[3]);
}

// define functions to retrieve values as needed,
// with caching to avoid double-calculation
int A() {
  static int val, set=0;
  if (!set) val=calculate_A();
  return val;
}
int B() {
  static int val, set=0;
  if (!set) val=calculate_B();
  return val;
}
int C() {
  static int val, set=0;
  if (!set) val=calculate_B();
  return val;
}

int main(int argc, char *argv[])
{
    if (argc!=4) {
        fprintf(stderr, "%s must be called with 3 values for A, B and C.\n", argv[0]);
        return 1;
    } else {
        args = argv;
    }
    // do the evaluation, with short-circuiting
    if (((A()>0) && (B()>5 || C() > 10))) {
        printf("condition was true\n");
    } else {
        printf("condition was false\n");
    }
    return 0;
}

原始HTML

var groupedContacts = [contactObject...];
var contactObject = {letter: "a", contacts: [singleContactObject...]};
//scores or even hundreds of contacts per letter
var singleContactObject = {name: "someName", number: "somePhone"};

HTML尝试1：

<ion-content>
<ion-item-group class="invite-sheet" *ngFor="let group of groupedContacts">
   <ion-item-divider class="header-letter">{{group.letter}}</ion-item-divider>
   <ion-item *ngFor="let contact of group.contacts">
      <ion-row align-items-center>
         <ion-col width-40>
            <h4 text-wrap class="name-invite">{{contact.name}}</h4>
         </ion-col>
         <ion-col width-35>
            <p>{{contact.number}}</p>
         </ion-col>
         <ion-col width-25>
            <button class="inner-invite" (click)="invite(contact)">Invite</button>
         </ion-col>
      </ion-row>
   </ion-item>
</ion-item-group>
</ion-content>

HTML尝试2：

<ion-content>
<ion-item-group [virtualScroll] = "groupedContacts">
   <ion-item-divider *virtualHeader="let group">
            {{group.letter}}
   </ion-item-divider>
   <ion-item *ngFor="let contact of group.contacts">
      <ion-row align-items-center>
         <ion-col width-40>
            <h4 text-wrap class="name-invite">{{contact.name}}</h4>
         </ion-col>
         <ion-col width-35>
            <p>{{contact.number}}</p>
         </ion-col>
         <ion-col width-25>
            <button class="inner-invite" (click)="invite(contact)">Invite</button>
         </ion-col>
      </ion-row>
   </ion-item>
</ion-item-group>
</ion-content>

HTML尝试3：

<ion-content>
<ion-item-group [virtualScroll] = "groupedContacts">
   <ion-item-divider *virtualHeader="let group">
            {{group.letter}}
   </ion-item-divider>
   <ion-item-group [virtualScroll]="contacts">
      <ion-row align-items-center>
         <ion-col width-40 *virtualItem="let contact">
            <h4 text-wrap class="name-invite">{{contact.name}}</h4>
         </ion-col>
         <ion-col width-35 *virtualItem="let contact">
            <p>{{contact.number}}</p>
         </ion-col>
         <ion-col width-25 *virtualItem="let contact">
            <button class="inner-invite" (click)="invite(contact)">Invite</button>
         </ion-col>
      </ion-row>
   </ion-item>
</ion-item-group>
</ion-content>

没有尝试产生结果，所以我必须从根本上误解某些东西。

更新： 这是我在看到@wannadream推荐后想出来的。我得到一个空白的屏幕：

<ion-content>
<ion-item-group class="invite-sheet" *ngFor="let group of groupedContacts">
   <ion-item-divider class="header-letter">{{group.letter}}</ion-item-divider>
   <ion-item-group [virtualScroll]="group.contacts">
      <ion-row align-items-center>
         <ion-col width-40 *virtualItem="let contact">
            <h4 text-wrap class="name-invite">{{contact.name}}</h4>
         </ion-col>
         <ion-col width-35 *virtualItem="let contact">
            <p>{{contact.number}}</p>
         </ion-col>
         <ion-col width-25 *virtualItem="let contact">
            <button class="inner-invite" (click)="invite(contact)">Invite</button>
         </ion-col>
      </ion-row>
   </ion-item>
</ion-item-group>
</ion-content>