2017-12-06 10 views
0

したがって、データを別のページに渡す(クリック)イベントを使用して1ページにデータを表示します。ページ自体。私は時間のためにそれにされて、私の破断点:)私は唯一の短縮ポストを維持するには、以下の関連するコードを表示するつもりです1つのIonic 3 vpageから別のIonic 3 vpageにデータを渡す

で午前まし

list2page(まあ、私が何を考えては関連性があります) .htmlを

... 
<button class="list-item" tappable ion-item (click)="goToFeed(item)" *ngFor="let item of list2.items"> 
    ... 
</button> 
... 

list2page.ts

... 
goToFeed(item) { 
    this.nav.push(ProfilePage, {item: item}); 
} 
... 

profile.ts - それはコンソールにアイテム全体が印刷されます - を参照してスクリーンショット

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 

import 'rxjs/Rx'; 

@Component({ 
    selector: 'profile-page', 
    templateUrl: 'profile.html' 
}) 
export class ProfilePage { 

    constructor(
    public nav: NavController, 
    public navParams: NavParams, 
) { 
    } 

    ionViewDidLoad() { 
    let veteran_first = (this.navParams.get('item.veteran_first')); 
    console.log(this.navParams.get('item')); 
    } 

} 

enter image description here

+0

'this.navParams.get( 'item.veteran_first')'を 'this.navParams.get( 'item')に置き換えます。veteran_first' – Duannx

答えて

0

あなたはクラス変数ではなく、ローカル変数としてveteran_firstを定義する必要があります。

export class ProfilePage { 
    veteran_first; //------------------------> define it here 
    constructor(public nav: NavController, public navParams: NavParams) {} 

    ionViewDidLoad() { 
    // Assign to this.veteran_first 
    this.veteran_first = this.navParams.get("item.veteran_first"); 
    console.log(this.navParams.get("item")); 
    } 
} 

次に、profile.html

<div> 
    veteran_first = {{veteran_first}} 
</div> 
0

モデルのパラメータをDelcare:

public data: any; 

は、そのようにようにインスタンス化:

this.data = this.navParams.data; 

か、これはまた

this.data = this.navParams.get('item'); 

を動作するはずですあなたはそれを持ってした後、その後、あなたがする必要がありますそれに掘削することができる

this.data.item.veteran_first 

またはそれに相当するもの。私は両方の方法を使用して、navCtrlを介して渡されたデータを取得しました。

関連する問題