이오 콜렉션 반복이 작동하지 않습니다.

템플릿으로 반복하여 카드로 출력 할 개체 배열이 있습니다. 나는 현재 * ngfor를 사용하여 작업하고 있으며 대신 컬렉션 반복을 사용하도록 변경하려고합니다.이오 콜렉션 반복이 작동하지 않습니다.

이

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

출처

2017-03-16 geoffs3310

난 당신이 이온이 사용하고 생각하고 vitualScroll을 사용할 필요를 collection-repeat 대신.

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

출처

2017-03-16 20:17:33 Hikmat

이오 콜렉션 반복이 작동하지 않습니다.

답변

관련 문제