Question

我对Ionic 2平台和角度2也很陌生。

我已经列出了显示从阵列中提取的名称的卡片元素，每张卡片都有相同的按钮，但所有卡片都必须转到他们的特定页面。

我在网上看了但是看不到任何关于这个的内容所以我在这里问你们：）

这是 calcs.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';
import { AuthService } from '../../services/auth/auth.service';
import { NavController } from 'ionic-angular';
import { Calc1 } from '../calculators/calc1/calc1';
import { Calc2 } from '../calculators/calc2/calc2';
import { Calc3 } from '../calculators/calc3/calc3';
import { Calc4 } from '../calculators/calc4/calc4';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';

@Component({
    templateUrl: 'calcs.html',

})

export class Calculators {
    items: any;

    constructor(public nav: NavController, private http: Http, private authHttp: AuthHttp, public auth: AuthService) {

        this.initializeItems();

    }

    initializeItems() {
        this.items = [
            { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' },
            { CalcPage: Calc2, CalcName: 'Some Other Calculator' },
            { CalcPage: Calc3, CalcName: 'Another Calculator' },
            { CalcPage: Calc4, CalcName: 'One Last Calculator' }
        ]
    }

    getItems(ev) {
        // Reset items back to all of the items
        this.initializeItems();

        // set val to the value of the searchbar
        let val = ev.target.value;

        // if the value is an empty string don't filter the items
        if (val && val.trim() != '') {
            this.items = this.items.filter((item) => {
                return (item.CalcName.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }
}

这是 calcs.html

<ion-header>
  <ion-navbar color="dark">
    <ion-title text-center>Calculators</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

  <ion-card *ngFor="let item of items" >
    <ion-card-content>
      <h2>
        {{item.CalcName}}
      </h2>
    </ion-card-content>
    <ion-row no-padding>
      <ion-col>
        <button ion-button clear small icon-left color="dark">
          <ion-icon name='calculator'></ion-icon>
          calculate
        </button>
      </ion-col>
      <ion-col text-right>
        <button ion-button clear small color="danger" icon-left>
          <ion-icon name='heart-outline'></ion-icon>
          favourite
        </button>
      </ion-col>
    </ion-row>
  </ion-card>

</ion-content>

要考虑的一件事是 calcs.ts ：

initializeItems() {
    this.items = [
        { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' },
        { CalcPage: Calc2, CalcName: 'Some Other Calculator' },
        { CalcPage: Calc3, CalcName: 'Another Calculator' },
        { CalcPage: Calc4, CalcName: 'One Last Calculator' }
    ]
}

CalcPage：Calc1
CalcPage：Calc2
CalcPage：Calc3
CalcPage：Calc4

这些是在 app.component

中注册的实际页面名称

Answer 1

你非常接近......只需修改html代码来处理点击事件，如下所示：

<button (click)="openPage(item)" ion-button clear small icon-left color="dark">
    <ion-icon name='calculator'></ion-icon>
    calculate
</button>

然后在您的组件代码中添加openPage方法：

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';
import { AuthService } from '../../services/auth/auth.service';
import { NavController } from 'ionic-angular';
import { Calc1 } from '../calculators/calc1/calc1';
import { Calc2 } from '../calculators/calc2/calc2';
import { Calc3 } from '../calculators/calc3/calc3';
import { Calc4 } from '../calculators/calc4/calc4';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';

@Component({
    templateUrl: 'calcs.html',

})

export class Calculators {
    items: any;

    constructor(public nav: NavController, private http: Http, private authHttp: AuthHttp, public auth: AuthService) {
        this.initializeItems();
    }

    initializeItems() {
        this.items = [
            { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' },
            { CalcPage: Calc2, CalcName: 'Some Other Calculator' },
            { CalcPage: Calc3, CalcName: 'Another Calculator' },
            { CalcPage: Calc4, CalcName: 'One Last Calculator' }
        ]
    }

    getItems(ev) {
        // Reset items back to all of the items
        this.initializeItems();

        // set val to the value of the searchbar
        let val = ev.target.value;

        // if the value is an empty string don't filter the items
        if (val && val.trim() != '') {
            this.items = this.items.filter((item) => {
                return (item.CalcName.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }

    public openPage(item: any): void {
        this.nav.push(item.CalcPage);
    }
}

Ionic 2按下每个列表元素按钮上的不同页面

1 个答案: