離子收集重複不工作

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>