在离子页面之间导航

Question

我正在从 json 数据中获取数据：https://jsonplaceholder.typicode.com/posts，并且我想在单击另一个页面中的按钮以显示这些详细信息时显示每个帖子的详细信息：https://jsonplaceholder.typicode.com/posts/3

我创建了一个提供程序并使用数据，一切都适用于主页，但是在将帖子 ID 传递给按 id 搜索帖子的方法时出现错误！

供应商：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { URLS } from '../urls/postUrls'

@Injectable()
export class PostsProvider {

  constructor(public http: HttpClient) {
  }

  getPosts(){
    return new Promise(resolve => {
      this.http.get(URLS.POSTS).subscribe(data => {
        resolve(data);
      }, err =>{
        console.log(err);
      });
    });
  }

  getPostByID(id){
    for (let i = 0; i < this.getPosts.length; i++) {
      if (this.getPosts[i].id == id) {
        return Promise.resolve(this.getPosts[i]);
      }
    }
  }


}

home.ts

import { Component     } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PostsProvider } from '../../providers/posts/posts';
import { PostPage } from '../post/post'

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

  posts: any;

  constructor(public navCtrl: NavController, public postsProvider: PostsProvider) {
    this.getPosts();
  }

  getPosts() {
    this.postsProvider.getPosts()
    .then(data => {
      this.posts = data;
    });
  }


  postDetails(id){
    this.navCtrl.push(PostPage, { id: id });
  }


}

home.html

<ion-content >
    <ion-card *ngFor="let post of posts">
      <img src="https://placekitten.com/760/300"/>
      <ion-card-content>
        <ion-card-title class="post-title">
          {{ post.title }}
        </ion-card-title>
        <p class="post-content">
          {{ post.body | slice:0:80}} ...
        </p>
        <button ion-button button-small read-more (click)="postDetails(post.id);">Read more</button>
      </ion-card-content>
    </ion-card>
  </ion-content>

post.ts

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

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

  post: any=0;
  constructor(public navCtrl: NavController, public navParams: NavParams, public postsProvider: PostsProvider) {
    this.postsProvider.getPostByID(this.navParams.get('id')).then( result => {
      this.post = result;
    });
  }

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

}

post.html

<ion-content padding *ngIf= "post != 0">
  <p>{{ post.title }}</p>
  <strong> {{ post.body}} </strong>

我没有找到正确的方法传递参数来获取帖子的详细信息页面！任何人都可以检查 id 参数发生了什么？

我收到了这个错误：

ERROR 错误：未捕获（承诺中）：TypeError：无法读取属性 未定义的'id'

Answer 1

你可以像这样通过post对象的洞

 <button ion-button button-small read-more (click)="postDetails(post)">Read more</button>

在 home.ts 中

 postDetails(post){ 

    this.navCtrl.push(PostPage, { post: post });

  }

然后在postPage中

     constructor(public navCtrl: NavController, public navParams: NavParams, public postsProvider: PostsProvider) {
          this.post = this.navParams.get('post');
  }

Answer 2

id: any = 0;        
constructor(public navCtrl: NavController, public navParams: NavParams, public postsProvider: PostsProvider) {


 this.id = this.navParams.get('id')
    this.getPostDetails()

}

getPostDetails(){
        this.postsProvider.getPostByID(this.id).then( result => {
        this.post = result;
    });