Ionic 2 virtualScroll在我滚动之前无法正确绘制

Question

我正在使用virtualScroll来显示卡片列表但是我发现当我第一次加载页面时，卡片在屏幕顶部附近彼此叠在一起，并且只有在我滚动时才能正确地放出：

towers.ts（控制器）：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TowerPage } from '../tower/tower';
import { Towers } from '../../providers/towers';

@Component({
    selector: 'page-towers',
    templateUrl: 'towers.html'
})
export class TowersPage {

    allTowers: any = [];

    constructor(public navCtrl: NavController, public towers: Towers){ 

        // get all towers 
        this.towers.getAll().then(result => {
            this.allTowers = result;
        });
    }

    viewTower(id){
        this.navCtrl.push(TowerPage, { "id": id});
    }
}

towers.ts（提供者）：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the Towers provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Towers {

    towers: any;

    constructor(public http: Http) {
        this.towers = [
            {
                'id' : 1,
                'name' : 'Tower 1',
                'images' : [
                    'http://placehold.it/1500x1000',
                    'http://placehold.it/1200x800',
                    'http://placehold.it/900x500'
                ]
            },
            {
                'id' : 2,
                'name' : 'Tower 2',
                'images' : [
                    'http://placehold.it/1500x1000',
                    'http://placehold.it/1200x800',
                    'http://placehold.it/900x500'
                ]
            },
            {
                'id' : 3,
                'name' : 'Tower 3',
                'images' : [
                    'http://placehold.it/1500x1000',
                    'http://placehold.it/1200x800',
                    'http://placehold.it/900x500'
                ]
            },
            {
                'id' : 4,
                'name' : 'Tower 1',
                'images' : [
                    'http://placehold.it/1500x1000',
                    'http://placehold.it/1200x800',
                    'http://placehold.it/900x500'
                ]
            },
            {
                'id' : 5,
                'name' : 'Tower 5',
                'images' : [
                    'http://placehold.it/1500x1000',
                    'http://placehold.it/1200x800',
                    'http://placehold.it/900x500'
                ]
            },
        ];
    }

    getAll(){       
        return Promise.resolve(this.towers);
    }

    getById(id){
        for(var i in this.towers) {
            if(this.towers[i].id == id) {
                return Promise.resolve(this.towers[i]);
            }
        }
    }

}

Towers.html（模板）：

<ion-header>
    <ion-navbar>
        <ion-title>Towers</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-content>

        <ion-list [virtualScroll]="allTowers" [approxItemHeight]="'390px'">

          <div *virtualItem="let tower">
              <ion-card>
                    <img src="{{ tower.images[0] }}" (click)="viewTower(tower.id);" />
                    <ion-card-content>
                        <ion-card-title (click)="viewTower(tower.id);">{{tower.name}}</ion-card-title>
                        <p>Lorem ipsu sum dolor amor sit amet</p>
                    </ion-card-content>
                </ion-card>
            </div>

        </ion-list>

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

当页面首次加载时，所有内容都如下所示：

然后，只要我将所有重新定位正确地滚动到位：

另外我知道我应该使用ion-img而不是img但是我遇到了一个问题，所以我暂时使用img