Javascript 离子2 virtualScroll不'；在我滚动之前，我不能正确地画

我使用virtualScroll来显示卡片列表，但是我发现当我第一次加载页面时，这些卡片都在屏幕顶部附近相互叠在一起，只有在我滚动时才能正确地隔开：

towers.ts（控制器）：

towers.ts（提供商）：

Towers.html（模板）：

塔
{{tower.name}
我爱你，我爱你

当页面如前所述首次加载时，所有内容都聚集在一起，如下所示：

然后，只要我滚动所有内容，它们就会正确地重新定位到位：

---

另外，我知道我应该使用ion img而不是img，但我也遇到了一个问题，所以我现在正在使用img，我也有同样的问题。你解决了吗？还没有我已经有一段时间没解决了。这可能是我使用的爱奥尼亚版本的一个bug。下次我再次访问它时，我希望会有一个更新的版本，所以我会看看更新是否能修复它。

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});
    }
}

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]);
            }
        }
    }

}

<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>