离子收集重复不起作用

时间:2017-03-16 19:59:39

标签: javascript angularjs ionic-framework ionic2

我有一个对象数组,我想在模板中循环并输出为卡片。我现在正在使用* 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

1 个答案:

答案 0 :(得分:2)

我认为你使用的是离子2,你需要使用vitualScroll代替collection-repeat

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