Ionin 3 - NavParams 出现未定义错误

Question

我正在尝试调用 reddit api 来获取并存储一个列表，然后在 html 中对其进行迭代，这是有效的，但是当我传递列表中单个项目的数据时通过 Navparams 添加详细信息页面会出现未定义错误，但是可以在列表打字稿文件

的 onClick 方法定义中访问数据

代码如下： home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  <ion-list>
    <ion-item  *ngFor="let post of posts">
      <ion-thumbnail (click)="onPostClicked(post)" item-start>
        <img [src]="post.data.thumbnail">
      </ion-thumbnail>
      <h2>{{post.data.title}}</h2>
      <p>{{post.data.author}}</p>
    </ion-item>
  </ion-list>

</ion-content>

home.ts

import { Component, Injectable } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { PostPage } from '../post/post';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

@Injectable()
export class HomePage {
  posts: any;

  constructor(public navCtrl: NavController, public http: HttpClient) {
    this.http.get("https://www.reddit.com/r/aww/top/.json?limit=10&sort=hot")
      .subscribe(data => {
        this.posts = data.data.children;
      })
  }

  onPostClicked(post: any) {
    let singlePost = post;
    console.log(singlePost);
    this.navCtrl.push(PostPage, singlePost);
  }

}

post.html - 我只留下了一个模板

<!--
  Generated template for the PostPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

page.ts

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



/**
 * Generated class for the PostPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

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


  constructor(public navCtrl: NavController, public navParams: NavParams) {
    let post = this.navParams.get("singlePost");
    console.log(post);
    
  }

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

}

Answer 1

你应该在 navCtrl.push() 中传递变量，方法是给出变量名和值，如

this.navCtrl.push(pageName, {varname : value } );

所以，你的方法应该是

onPostClicked(post: any) {
    let singlePost = post;
    console.log(singlePost);
    this.navCtrl.push(PostPage, {singlePost : singlePost} );
  }

Answer 2

确保你的值得到正确的，

console.log(singlePost); //From this line

这里是一个例子，你必须稍微修改一下，

设置参数，

 onPostClicked(post: any) {
    let singlePost = post;
    console.log(singlePost);
    if(singlePost){  
        this.navCtrl.push(PostPage, {'singlePost',singlePost});
    }
  }

获取参数

 let post = this.navParams.get("singlePost");
 console.log(post);

那么现在打印正常了

Answer 3

Working Solution

HTML:

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

 <button ion-button (click)="navigateToOtherPage(posts)">Navigate</button>
</ion-content>

contact.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div>
    Name: {{data.name}}
  </div>
  <div>
    Name: {{data.age}}
  </div>
</ion-content>

TS:

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {ContactPage} from '../contact/contact';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  posts: object = {
    name: 'UnluckyAj',
    age: '20'
  }

  constructor(public navCtrl: NavController) {
  }

  navigateToOtherPage(params){
    this.navCtrl.push(ContactPage, {params: params});
  }

}

contact.ts

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

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {
  data: any;

  constructor(public navCtrl: NavController,
  public prm : NavParams) {
    this.getDataFromNavigation();
  }
  getDataFromNavigation(){
    this.data = this.prm.get('params')
  }

}

Ionin 3 - NavParams 出现未定义错误

Ionin 3 - NavParams getting undefined error

ionic-framework

ionic3

angular

angular6