Question

我是Ionic的初学者2.我想点击列表项后将Json数据从一个页面传递到另一个页面。列表中的项目来自json，并且具有与每个项目相关联的特定ID。所以我想在特定项目上点击事件后传递一个特定的id。

这是json链接：

1。 http://factoryunlock.in//products在此链接的帮助下，我将在列表中显示产品

2。但现在我想显示该特定项目的详细信息。所以我使用这个链接

http://factoryunlock.in/products/1

我想在特定项目的点击事件后更改该ID（在链接2 products/1）。

这是我的Listview代码（Second.ts）。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
import { DetailsPage } from '../details/details';
import { ChartsPage } from '../charts/charts';


@IonicPage()
@Component({
  selector: 'page-second',
  templateUrl: 'second.html',
  providers: [EarthquakesProvider]
})
export class SecondPage {

    public DateList: Array<Object>;

    constructor(public _navCtrl: NavController,
        public _earthquakes: EarthquakesProvider) {

       this.getEarthquakes();

    }
    public Listitem(l) {
        this._navCtrl.push(DetailsPage
            );

    }

    public openModal() {
        this._navCtrl.push(ChartsPage);

    }
    getEarthquakes() {
        this._earthquakes.loadEarthquakess().subscribe(res => {
            this.DateList = res.data;

        });
    }

 }

这是我的提供者控制器：

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

@Injectable()
export class EarthquakesProvider {

    constructor(public _http: Http) {
        console.log('Hello Earthquakes Provider');
    }


    loadEarthquakess() {
        return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products')
            .map(res => res.json());
    }

    loadEarthquakesdetails() {
        return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products/1')
            .map(res => res.json());
    }

这是我的详细信息。代码

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


@IonicPage()
@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
  providers: [EarthquakesProvider]
})
export class DetailsPage {

    public DateList: Array<Object>;

    item: any;
    constructor(public _navCtrl: NavController, public _earthquakes: EarthquakesProvider) {


        this.getEarthquakes();

    }

    getEarthquakes() {
        this._earthquakes.loadEarthquakesdetails().subscribe(res => {
            this.DateList = res.data;
            console.log(res.data);
        });
    }

 }

这是我的详情视图快照

Answer 1

列表视图页面

 public Listitem(id) {
    this._navCtrl.push(DetailsPage, {id: id}); 
 }

提供商控制器：

 loadEarthquakesdetails(id) {
        return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/${id}`)
            .map(res => res.json());
    }

详情。代码

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


@IonicPage()
@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
  providers: [EarthquakesProvider]
})
export class DetailsPage {

    public DateList: Array<Object>;

    item: any;
     id: number;
    constructor(public _navCtrl: NavController, public _earthquakes: EarthquakesProvider, public navParams: NavParams) {

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


    }
    ionViewDidLoad() {
        this.getEarthquakes(this.id);
}
    getEarthquakes(id) {
        this._earthquakes.loadEarthquakesdetails(id).subscribe(res => {
            this.DateList = res.data;
            console.log(res.data);
        });
    }

 }

Answer 2

您可以在

中使用此功能

提供者控制器

loadEarthquakesdetails(id) {
    return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/'+'id')
        .map(res => res.json());
}

这项工作对我而言。

如何将数据从一个页面传递到另一个页面以便在Ionic 2中导航

2 个答案:

提供者控制器