Virtual Scroll not working in tab

Ionic Framework ionic-v3
1

Hello

I’d like to use virtual scroll because I have a long list with images. But I don’t manage to make it work. My items are not displayed with virtual scroll but they are when I use ngFor.

<div [virtualScroll]="items" >
    <div *virtualItem="#item" > hey {{item.nom}}</div>	
</div>

My items array contains instances of a custom class but I tried to use an array of strings and it didn’t change anything. They are loaded from an http request when the pages inits. This happens inside of a tab. Am I missing something about how to use virtual scroll ?

Thanks

2

Seems to work for me so far.

import {Page} from 'ionic-angular';
@Page({
  template: `
  <ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>

<ion-content>
  <ion-list [virtualScroll]="items">

    <ion-item *virtualItem="#item">
      {{item}}
    </ion-item>

  </ion-list>
</ion-content>

  `
})
export class Page1 {
  public items = [];
  constructor() {
    for (let i = 0; i < 1000; i++) {
      this.items.push(i)
    }
  }
}

Well after successfully crashing my computer, turns out to an issue with elements not having a set height. Could you open an issue for this on github?

3

I added an issue based on what you said (I didn’t face it) : https://github.com/driftyco/ionic/issues/6421

The list is displayed when the array is populated in the constructor but not when it is populated from the callback of an http request:

export class MyPage {
    items = [];

  constructor(nav: NavController, private _service: Service)
  }

  getItems() {
    this._service.getItems()
                   .subscribe(
                     res => {  for(let i=0; i<30; i++){
      this.items.push("hello");
  }},
                     error =>  console.log(error));
  }

 ngOnInit(){
  this.getItems();
 }
}

and in the service:

getRestos () {
    return this.http.get(this._url)
                    .map(res => <CustomItem[]> res.json().data )
                    .catch(this.handleError);
  }