Question

我想在这两页之间传递数据。可以从新的加载到新的详细信息页面ald，但是这里遇到的问题是无法从详细页面获取api数据。

news.html 新页

<ion-header>
  <ion-navbar color="danger" no-border-bottom>
    <button ion-button menuToggle>
      <ion-icon name="ios-contact"></ion-icon>
    </button>

    <ion-title>民安</ion-title>

  </ion-navbar>

</ion-header>

<ion-content padding>

      <ion-item-group *ngFor="let new of news">

          <ion-thumbnail *ngIf="new.Preview_image1" item-start>
            <img src="{{new.Preview_image1}}">
          </ion-thumbnail>
          <button ion-item (click)="goToNewsDetail(new)">
            <h2>{{new.title}}</h2>
            <h2>{{new.publish_time}}</h2>
        <p>
            <ion-icon name="chatboxes">{{new.comments_count}}</ion-icon>
        </p>
        </button>


      </ion-item-group>

</ion-content>

news.ts 新功能页面

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

import { NewsDataProvider } from '../../providers/news-data/news-data';
import { NewsDetailPage } from '../news-detail/news-detail';

@IonicPage()
@Component({
  selector: 'page-news',
  templateUrl: 'news.html',
})
export class NewsPage {
    news:any;
  constructor(public navCtrl: NavController, public navParams: NavParams,public newsData:NewsDataProvider){
    this.getNews();
  }

  getNews() {
      this.newsData.getNews().then(data => {
        this.news = data;
      });
  }

  goToNewsDetail() {
    this.navCtrl.push(NewsDetailPage);
  }

}

news-detail.ts 。新闻详情功能页面

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NewsDataProvider } from '../../providers/news-data/news-data';

@IonicPage()
@Component({
  selector: 'page-news-detail',
  templateUrl: 'news-detail.html',
})
export class NewsDetailPage {
    new: any;
    constructor(public navCtrl: NavController, public navParams: NavParams,public newsData:NewsDataProvider) {
        this.new = navParams.get('new');
  }

}

news-detail.html 新闻详情页面

<ion-header>

  <ion-navbar color="danger">
    <ion-title>{{new.title}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    news content
</ion-content>

news.data.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class NewsDataProvider {
    data:any;

  constructor(public http: Http) {
    //console.log('Hello NewsDataProvider Provider');
  }

  getNews() {

    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      this.http.get('http://servertrj.com/api/news?api_key=123').map(res => res.json().data).subscribe(data => {
          this.data = data;
          resolve(this.data);
        });
    });
  }

}

Answer 1

您要通过对象<button ion-item (click)="goToNewsDetail(new)">发送，但您的方法不接受或将其发送到新页面。

goToNewsDetail(newsItem:any) {
  this.navCtrl.push(NewsDetailPage, { new: newsItem });
}

您现在可以在NewsDetailPage中接受它，就像您已经拥有this.new = navParams.get('new');

一样

您可能还需要在{{new?.Title}}

之前向页面添加安全操作符

在不相关的说明中，您可能希望将(click)更改为(tap)。 (click)事件会增加300毫秒的延迟，以便点击以允许双击，其中(tap)事件就像普通的移动点按一样。当您的应用在移动设备上时，这也可以消除任何意外的意外点击。

Answer 2

使用安全操作员

将{{new.title}}更改为{{new?.title}}

或

将new声明为object

将new: any;更改为new: any = {};

和

您还需要在推送新页面时将导航参数（new）传递到目标页面。

Answer 3

发送＆＃39; new＆＃39;推送参数。写下你的goToNewsDetail＆＃39;方法如波纹管。

goToNewsDetail(news) {

 this.navCtrl.push(NewsDetailPage,{new:news});

}

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

3 个答案: