我的工作离子4项目。我的项目是从使用的网址输入搜索获取数据JSON。升希望传递数据时,用户是点击任何内容,以显示他们另一个页面了解详情。我企图用这个代码,但升得未定义的值!
这段代码保存搜索操作
export class FlightsearchPage {
public search = ''
public flight : any
filterItems:any;
callsign : any;
constructor(private http: HTTP, public loadingController: LoadingController, private nav : NavController) {
this.addThemFunction
}
keyPressed(event: any) { /
console.log(event.target.value);
this.addThemFunction(event.target.value);
}
async addThemFunction(search){
this.http.get('/web/find?query='+search+'', {}, {})
.then(data => {
const parsed = JSON.parse(data.data);
this.flight = parsed.results;
this.filterItems= this.flight;
this.callsign = this.flight.detail.flight
/// here l am try to pass value callsign to page details ///
this.nav.navigateForward(`/flightserachdetails/${this.callsign}`)
}), err=>{
}
}
}
详细搜索
<ion-content padding>
<ion-item>
<ion-label position="floating">Enter your flight number</ion-label>
<ion-input [(ngModel)]="search" (keyup)="keyPressed($event)" placeholder="Ex : iaw556"></ion-input>
</ion-item>
<ion-item *ngFor="let item of flight" routerDirection="forward">
<ion-label>
<ion-text color="primary">
<h3 [routerLink]="['/flightserachdetails', id]">{{item.label}}</h3>
</ion-text>
<p>{{item.name}}</p>
</ion-label>
</ion-item>
</ion-content>
这个代码是从上面的代码中获取数据
export class FlightserachdetailsPage {
public flight : any
callsignId = null
constructor(private http: HTTP, public loadingController: LoadingController, private nav: NavController,private activatedRoute: ActivatedRoute) {
this.callsignId = this.activatedRoute.snapshot.paramMap.get('id')
}
用于从上方的另一页面的显示数据。
<ion-content padding>
{{callsignId}}
{{flight.request.fetchBy}}
</ion-content>
JSON响应
{
"results": [
{
"id": "IA107",
"label": "IA107",
"detail": {
"callsign": "IAW107",
"flight": "IA107",
"fetchBy": "IA107"
},
"type": "schedule",
}
]
}
我上午约乱七八糟的代码遗憾。任何建议或再给我一次的代码示例,请?
要查询,并在同一时间浏览所以从addThemFunction(search)
删除。
async addThemFunction(search){
this.http.get('/web/find?query='+search+'', {}, {})
.then(data => {
const parsed = JSON.parse(data.data);
this.flight = parsed.results;
this.filterItems= this.flight[0];
this.callsign = this.flight.detail.flight
}
}
}
你需要从addThemFunction(search)
功能删除导航和创建一个新的被点击的项目时导航。
navigate(id){
this.nav.navigateForward(`/flightserachdetails/${id}`);
}
而从H3删除routerLink
并调用navigate()
功能时点击的项目和该功能通过id
。
<ion-item *ngFor="let item of flight" routerDirection="forward">
<ion-label>
<ion-text color="primary">
<h3 (click)="navigate(item.id)">{{item.label}}</h3>
</ion-text>
<p>{{item.name}}</p>
</ion-label>
</ion-item>
要通过完整的对象:
`this.router.navigate(['flightserachdetails'], item);
在接下来的页面:
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.queryParams.subscribe(resp => {
console.log(resp);
});