web-dev-qa-db-de.com

So übergeben Sie Daten für die Navigation in Ionic 2 von einer Seite auf eine andere

Ich bin Anfänger in Ionic 2. Ich möchte Json-Daten von einer Seite auf eine andere weitergeben, nachdem ich auf Listenelemente geklickt habe. Die Elemente in der Liste stammen von json und weisen jedem Element bestimmte IDs auf. Daher möchte ich nach einem Klickereignis für ein bestimmtes Element eine bestimmte ID übergeben.

Dies ist der Json-Link:

1. http://factoryunlock.in//products Mit Hilfe dieses Links wird das Produkt in der Liste angezeigt

 enter image description here

2. Nun möchte ich Details zu diesem bestimmten Artikel anzeigen. Also benutze ich diesen Link

http://factoryunlock.in/products/1

Ich möchte diese ID (In Link 2 products/1) nach dem Klickereignis für ein bestimmtes Element ändern.

Dies ist mein Listview-Code (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;

        });
    }

 }

Dies ist mein Provider Controller:

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());
    }

Dies ist mein code von details.ts

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);
        });
    }

 }

Dies ist der Schnappschuss für Details

 enter image description here

7

Listenansicht Seite

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

Provider Controller:

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

Details.ts-Code

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);
        });
    }

 }
6
Swapnil Patwa

Sie können dies in Ihrem verwenden 

Provider Controller

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

Diese Arbeit für mich. 

0
rahul patel