在IONIC中将数据从一个json传递到第二个

时间:2018-10-26 16:08:41

标签: arrays json ionic-framework ionic3

,感谢您的帮助。 我在后端服务器中创建了很多json,如下所示:

Json1

[{"idtessera":"314","cognome":"xxx","nome":"xxx","sommagol":"5","idsquadra":"56","squadra":"xxx","idtorneo":"2","descrizione":"xxx","log":"url"},{"idtessera":"224","cognome":"xzxz","nome":"xzxz","sommagol":"4","idsquadra":"5","squadra":"xzxzxz","idtorneo":"2","descrizione":"SERIE B","log":"url"}]

Json2

[{"idsquadra":"314","squadra":"xxx","tipo":"xxx","stagione":"2018\/2019","idtorneo":"3","descrizione":"xxx","foto_squadra":"url","logo_squadra":"url"},{"idsquadra":"9","squadra":"xzxz","tipo":"xzxz","stagione":"2018\/2019","idtorneo":"3","descrizione":"zxzx","foto_squadra":"","logo_squadra":""}]

在我的应用程序中,我创建了一个用于存储(在本例中)所有“ squadra” obj的服务;这是我的提供者:

squadre.ts

    import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';
/*
  Generated class for the SquadreProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class SquadreProvider {

  private apiUrl = 'http://xxx.json';


      constructor(public http: HttpClient) {
        }

        getSquadre() {
          return new Promise(resolve => {
            this.http.get(this.apiUrl).subscribe(data => {
              resolve(data);},
              err => {
                console.log(err);
              });
            });
          }

现在,例如,我有一些页面,其中以如下方式显示json 1的数据:

page-datajson1.ts

  import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { LoadingController } from 'ionic-angular';
    import { ModalController } from 'ionic-angular';
    import { ProfiloSquadraPage } from '../../profilo-squadra/profilo-squadra';
    import { Http } from '@angular/http';
    import 'rxjs/add/operator/map';


    @IonicPage()
    @Component({
      selector: 'page-marcatori-serie-a',
      templateUrl: 'marcatori-serie-a.html',
    })
    export class MarcatoriSerieAPage {

      marcatoris : any = [];

      constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public loading: LoadingController,
      public http: Http,
      public modalCtrl: ModalController ) {

        this.http.get('http://xxx.json').map(res => res.json()).subscribe(data => {
            this.marcatoris = data;
            });  


    }          

        public test(event ,idsquadra ){
  this.navCtrl.push(ProfiloSquadraPage,{
  idsquadra:this.marcatori.idsquadra
  });
  }



}

marcatori-page.html

<ion-content padding>

<ion-list>

    <ion-item class="playeritem" *ngFor="let marcatori of marcatoris ; let i = index" [attr.data-index]="i" >
    <button ion-button clear class="nome" > {{i+1}} | {{marcatori.cognome}} {{marcatori.nome}} </button>
    <span style="float:right" class="voto">{{marcatori.sommagol}}</span><br />
    <button ion-button clear (click)="test($event, idsquadra)"">
      <img src={{marcatori.log}} onError="this.src='assets/imgs/logo_squadra.jpg'" width="24px"> <h4 style="padding: 2px; color:black;">{{marcatori.squadra}} </h4> </button>


    </ion-item>
  </ion-list>
</ion-content>

如果您在我的公共函数test()中看到,我使用navctrl来存储marcatori obj的idsquadra,并按下“详细信息-quadros”(profilosquadra)页面。

现在,如何在squadreprovider数组中检查传递的ID并在profilosquadra中显示正确的数据? 这样正确吗?

0 个答案:

没有答案