离子收集重复不工作

Question

我有一个对象数组，我想循环通过我的模板并输出为卡片。我现在正在使用* ngfor，现在我想将它改为使用collection repeat。

这里是我的代码：

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

模板：

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

所以当提到这个方法工作得很好。如果我试着改变它，虽然使用收集的重复，而不是像这样：

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

然后我收到以下错误：

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

Answer 1

我认为你正在使用的离子2，您需要使用vitualScroll而不是collection-repeat。

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