javascript - ionic 收集重复不起作用

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

我认为您使用的是 ionic 2，您需要使用 vitualScroll 而不是 collection-repeat。

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