我正在从事 ionic 4 项目。我的项目使用输入搜索从 url 获取数据 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);
});
关于angular - 从url在页面之间传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54592495/