Ionic 2 virtual scroll with objects

Ionic Framework ionic-v3
1
2

Not sure if it will fix the problem but i think you need to seperate the values with a komma (,)

{
     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"
   }
3

they have comma’s, its a typo in my post. Sorry for that, the json object is correct. In a regular list its working.

4

ok, sorry about that :slight_smile:

i used virtualScroll myself so i checked if i saw any differences between my code and yours.
the only thing i see right now is that i used
[approxItemHeight]="‘50px’"

note that the px has single quotes ‘50px’ inside the double quotes " ".

5

Did you use a text array or an array of json objects? I tried your solution, but it does not work.

6

Do you get any kind of error? because i have just made a Testpage and i get this for output
image

The data is your data that i copy-pasted so it cant be that

7

these are the files i made
testPage.component.ts
`import { Component } from ‘@angular/core’;

@Component({
selector: ‘test’,
templateUrl: testpage.component.html
})
export class TestPage {
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”
}
]
constructor() {

}
}`

and the html file looks like this

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

8

not sure if it is fixed yet but i did another test.
when i remove the [ ] around the “approxItemHeight” i get a white screen.
with the [ ] around it, it works fine.

9

Thanks for helping out. I did not yet solve the problem, but this did help me find where the problem is.

  1. The JSON like hardcoded above does work.
  2. When creating a JSON object like this:
user = {};
user['displayName'] = 'foo';
users.push(user);

The code fails, I get a blank screen.

  1. When printing JSON.stringify(users) with the array created above, and pasting the print into the users[ ] array, the virtualscroll does show again.

So there’s something wrong with the JSON convertion into the virtualscroll object. The exact same code does run on a regular list object. I’m not sure what to do next.

10

hmm, well i tried doing the same as you, so i added

    this.user["displayName"] = "test";
    this.users.push(this.user);

and it does show for me…
i’m not really sure where the problem is.
hopefully someone smarter than me can figure this out :slight_smile:

11

Thank you Saidorel, you’ve been really helpful. After a lot of debugging I think I now found the problem. Everything hardcoded works, when I load data from server it does not work. The problem seems to be related to this issue:

When I render my page, the users list is empty. The virtual scroll knows this and gets disabled. As soon as I retrieve data from server and fill the list, the virtual scroll remains disabled, although there is data in the list. When I push an object, hardcoded, to the users list in my constructor before loading data from server, the users list does show & does update with data from the server.

Meaning: When virtual scroll is empty on start, it gets disabled(and cannot be enabled?) and does not get enabled when pushing data into the array. With regular lists this does not occur, this is why I have been blind and searching in the wrong direction. Looking for a solution now, or maybe I will stick to the regular list.

12

Problem solved in 3.1.1