Question

我正在构建一个离子应用程序。离子应用程序中有一个页面，其中包含显示相应图像和文本的离子卡。我还想为每个离子卡实现不同的点击，以便在我点击每个离子时导航到不同的页面卡。

此时，我能够显示具有不同图像和文本的不同离子卡，但我不能为每个离子卡实现不同的（点击）。

以下是代码，

category.HTML

<ion-header>
  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>appname</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">

    <ion-list [virtualScroll]="items">
          <ion-item *virtualItem="let item">
              <ion-card collection-repeat="item in items" (click)="item.golink()" class="wallcard">
                  <img  collection-repeat="item in items" class="homecardimage" [src]="item.Url"/>
                  <div collection-repeat="item in items" class="card-title">{{item.Name}}</div>
                </ion-card>
          </ion-item>
        </ion-list>
 </ion-content>

category.TYPESCRIPT

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,AlertController,LoadingController } from 'ionic-angular';
import { Network } from '@ionic-native/network';

@IonicPage()
@Component({
  selector: 'page-category',
  templateUrl: 'category.html',
})
export class CategoryPage {

  constructor(public navCtrl: NavController, public navParams: NavParams,private network: Network,public alertCtrl: AlertController,public loadingCtrl: LoadingController) 
  {}
  items = [
    { id: 0, Name: 'Scruff McGruff' ,Url:'Link1',golink:()=>'goPopular()'},
    { id: 1, Name: 'G.I. Joe',Url:'Link2',golink:()=>'goPopular1()'},
    { id: 2, Name: 'Miss Frizzle',Url:'Link3',golink:()=>'goPopular2()' },
    { id: 3, Name: 'Ash Ketchum',Url:'Link4',golink:()=>'goPopular3()' }
  ];

  goPopular(){
    let loader = this.loadingCtrl.create({
        content: "Please wait...",
        duration: 10
      });
      loader.present();
      this.navCtrl.push('PopularPage');
       }

     goAbstract(){
      let loader = this.loadingCtrl.create({
          content: "Please wait...",
          duration: 10
        });
        loader.present();
        this.navCtrl.push('AbstractPage');
           }

     goFullscreen(){
      this.navCtrl.push('FullscreenPage');
     }   

  ionViewDidLoad() {
    console.log('ionViewDidLoad CategoryPage');
    }
}

如何为每张离子卡实现不同的（点击）收集重复？

单击离子卡虚拟滚动

0 个答案: