带有对象的 Ionic 2 虚拟滚动答案

【问题标题】：Ionic 2 virtual scroll with objects带有对象的 Ionic 2 虚拟滚动
【发布时间】：2017-05-05 22:49:46
【问题描述】：

我正在构建一个 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 我可以为完全相同的数据集创建一个列表。虚拟卷轴的文档不多，希望有人能帮帮我。

【问题讨论】：

标签： json ionic2

【解决方案1】：

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

Github issue: virtual scroll not refreshing on empty initialization

【讨论】：