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出现未定义错误

3 个答案: