Навигация между ионными страницами - PullRequest
Новая
       13

Навигация между ионными страницами

0 голосов
/ 26 сентября 2018

Я извлекаю данные из данных 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.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?

Я получил эту ошибку:

Ошибка: ошибка (в обещании): TypeError: Невозможно прочитать свойство 'id' из неопределенного

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018 
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;
    });
0 голосов
/ 26 сентября 2018

Вы можете передать объект 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');
  }
...