Ionic Collection Wiederholung funktioniert nicht

Question

Ich habe eine Reihe von Objekten, die ich in meiner Vorlage durchlaufen und als Karten ausgeben möchte. Ich habe es funktioniert derzeit mit * ngfor und jetzt möchte ich es ändern, stattdessen Sammlung wiederholen zu verwenden.

Hier ist mein Code:

import { Component } from '@angular/core'; 

import { NavController } from 'ionic-angular'; 

import { TowersModel } from '../../app/models/towers-model'; 

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

     towers: any; 

    constructor(public navCtrl: NavController){ 

     this.towers = [ 
      { 
       "name" : "Tower 1", 
       "image" : "http://placehold.it/350x150" 
      }, 
      { 
       "name" : "Tower 2", 
       "image" : "http://placehold.it/350x150" 
      }, 
      { 
       "name" : "Tower 3", 
       "image" : "http://placehold.it/350x150" 
      } 
     ]; 
    } 
} 

Vorlage:

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

<ion-content padding> 
    <ion-content> 

     <ion-card *ngFor="let tower of towers"> 
      <img src="{{ tower.image }}" alt="{{tower.name}}"> 

      <ion-item> 
       <h2>{{tower.name}}</h2> 
       <p>11 N. Way St, Madison, WI 53703</p> 
      </ion-item> 

      <ion-item> 
       <span item-left>18 min</span> 
       <span item-left>(2.6 mi)</span> 
       <button ion-button icon-left clear item-right> 
        <ion-icon name="navigate"></ion-icon> 
        Start 
       </button> 
      </ion-item> 
     </ion-card> 

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

So wie erwähnt dieser Ansatz funktioniert gut. Wenn ich versuche, und es aber zu verwenden, anstatt eine Sammlung Wiederholung ändern wie folgt:

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

<ion-content padding> 
    <ion-content> 

     <ion-item collection-repeat="let tower of towers"> 
      <h1>Tower {{tower.name}}</h1> 
     </ion-item> 

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

Dann bekomme ich folgende Fehlermeldung:

Runtime Error 
Error in ./TowersPage class TowersPage - caused by: Cannot read property 'name' of undefined 

Answer 1

Ich glaube, Sie werden mit ionischen 2 und Sie müssen vitualScroll verwenden anstelle von collection-repeat.

<ion-list [virtualScroll]="towers"> 
    <ion-item *virtualItem="let tower"> 
    {{ tower.name }} 
    </ion-item> 
</ion-list>