Ionic 2各リスト要素ボタンの別のページにプッシュ

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.tでということですS：

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); 
    } 
}