Question

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

Answer 1

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

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

离子收集重复不起作用

1 个答案: