从url在页面之间传递数据 [英] Passing Data between pages from url

问题描述

我正在从事ionic 4项目.我的项目是使用输入搜索从url获取数据json.当用户单击任何项​​目以向他们显示另一个页面以获取更多详细信息时，我希望传递数据.我尝试过使用此代码，但得到未定义的值！

I am working on ionic 4 project. My project is getting data json from url using input search . l want passing data when users is click on any items to show them another page for more details . l tried with this code but l get undefined value !

此代码正在执行搜索操作

this code is holding search operation

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> 

此代码正在从上面的代码中获取数据

this code is getting data from code above

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')           





}

用于显示上方另一页的数据.

for display data from another page above.

<ion-content padding>
   {{callsignId}}
   {{flight.request.fetchBy}}
</ion-content>

json响应

{
  "results": [
    {
      "id": "IA107",
      "label": "IA107",
      "detail": {
        "callsign": "IAW107",
        "flight": "IA107", 
       "fetchBy": "IA107"
      },
      "type": "schedule",
    }
  ]
}

我为混乱代码感到抱歉.有什么建议或给我另一个代码示例，请?

l am sorry about mess code. any suggestion or give me another code example, please?

推荐答案

您正在同时查询和导航，因此请将其从addThemFunction(search)中删除.

You are querying and navigating at the same time so remove that from 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)功能中删除导航，并创建一个新的导航来单击该项目.

You need to remove navigation from addThemFunction(search) function and create a new one to navigate when the item is clicked.

navigate(id){
    this.nav.navigateForward(`/flightserachdetails/${id}`);
}

然后从h3中删除routerLink并在单击项目时调用navigate()函数，并在该函数中传递id.

And remove routerLink from h3 and call navigate() function when item clicked and pass id in that function.

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

这篇关于从url在页面之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！