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参数发生了什么事？

我收到此错误：

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

Answer 1

您可以像这样通过孔<div ng-if="candidate.phones"> <div ng-repeat="phone in candidate.phones" style="position:relative"> -- write out some value </div>`对象

post

在home.ts

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

然后在postPage

 postDetails(post){ 

    this.navCtrl.push(PostPage, { post: 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;
    });

在离子页面之间导航

2 个答案: