我是Ionic的初学者2.我想在点击列表项后将Json数据从一个页面传递到另一个页面.列表中的项目来自json,并且具有与每个项目相关联的特定ID.所以我想在特定项目的点击事件之后传递特定的id.
这是json链接：
1. http://factoryunlock.in//products借助此链接,我将在列表中显示产品
但是现在我想展示那个特定项目的细节.所以我使用这个链接
http://factoryunlock.in/products/1
我想在特定项目的点击事件后更改该ID(在链接2产品/ 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());
}
这是我的details.ts代码
import { Component } from '@angular/core';
import { IonicPage,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);
});
}
}
这是我的详细信息视图快照
列表视图页面
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());
}
Details.ts代码
import { Component } from '@angular/core';
import { IonicPage,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);
});
}
}
