Переходить между ионными страницами

Я получаю данные из данных json: https://jsonplaceholder.typicode.com/posts, и я хочу отображать детали каждого сообщения, когда нажимаю кнопку на другой странице, чтобы отобразить детали: https://jsonplaceholder.typicode.com/posts/3

Я создал провайдера и использую данные, и все работает для домашней страницы, но у меня возникла ошибка при передаче идентификатора сообщения методу, который выполняет поиск сообщения по идентификатору!

провайдер:

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.info(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.info('ionViewDidLoad PostPage');
  }

}

post.html

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

Я не нашел правильного способа передать параметры, чтобы получить страницу с подробностями сообщения! Кто-нибудь может проверить, что происходит с параметром id?

У меня такая ошибка:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'id' of undefined