Question

我正在构建一个Ionic 2应用程序，我想列出用户，以便他们可以找到对方。由于我的应用程序中可以有1500个用户，因此我想使用虚拟滚动。使用字符串数组，虚拟滚动工作正常。数组：

users = ["hi", "bye"]

这是我的html页面中的代码：

<ion-list [virtualScroll]="users" approxItemHeight="50px">
  <ion-item *virtualItem="let user">
    {{user}}
  </ion-item>
</ion-list>

现在我正在创建一个json对象数组，数组如下所示：

users = [
   {
     displayName: "foo",
     email: "foo@bar.nl",
     picture: "assets/img/defaultAvatar.png",
     username: "foo"
   },
   {
     displayName: "bar",
     email: "bar@foo.nl",
     picture: "assets/img/defaultAvatar.png",
     username: "bar"
   }
]

然后我调整我的html中的代码，就像我在常规列表中那样做

<ion-list [virtualScroll]="users" approxItemHeight="50px">
  <ion-item *virtualItem="let user">
      user.displayName: {{user.displayName}}
  </ion-item>
</ion-list>

问题：我得到一个空列表，而在我的页面上打印用户则显示一个json对象数组。使用* ngFor我可以为完全相同的数据集创建列表。虚拟卷轴没有太多文档，所以我希望有人可以帮助我。

Answer 1

原来是另一个问题，与从服务器检索数据有关，这意味着虚拟滚动用空数组初始化。

Github issue: virtual scroll not refreshing on empty initialization

离子2虚拟滚动与对象

1 个答案: