How to pass the parameter betwen component ionic 2 (data json) from the home page to the side menu

Ionic Framework ionic-v3
1

I need to pass the (members) parameter from the page Cheval.ts to page app.html forread the data

App/app.html

<ion-menu id="menu1" side="left" type="push" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>aa</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose="menu1" ion-item *ngFor="let p of pages" >
        {{ p }}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>
<ion-menu id="menu2" side="right" type="push" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>search</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-label>Date</ion-label>
    <ion-select >
      <ion-option *ngFor="let m of cheval" value="nes">{{m.Cheval.nom}}</ion-option>
    </ion-select>
    </ion-list>
  </ion-content>
</ion-menu>


<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content ></ion-nav>

Page/Cheval.ts

@Component({
  selector: 'page-cheval',
  templateUrl: 'cheval.html'
})
export class ChevalPage {

   members;
  constructor(public navCtrl: NavController,public popoverCtrl: PopoverController, public navParams: NavParams,public data: ServiceProvider, public loadingCtrl:LoadingController  ,public menuCtrl: MenuController ) {
  this.getDados();
  this.initializeItems();
 getDados() {
      //retorno de Dados
    return  this.data.getData()
            .subscribe(
                  data=> {
                      this.members = data;
                      //console.log(data);
                      
                  },
                  err=> console.log(err)
                  
            );
      }
}
2

Why can’t the app component get the information from the same service provider that ChevalPage is getting it from? I also don’t understand why getDados() is returning a subscription.

3

To browse the list of horses in the Cheval.html pages

 <ion-row *ngFor="let member of members" (click)="View(member)" align-items-center>
        <ion-col width-30>
          {{member.CourseHasCheval.length}}
        </ion-col>
        <ion-col width-20>
          <strong *ngIf="member.Cheval.sexe==2">Mâle</strong>
          <strong *ngIf="member.Cheval.sexe==1">Femelle</strong>
        </ion-col>
        <ion-col width-25>
          {{member.Eleveur.prenom}}
        </ion-col>
        <ion-col width-25>
          {{member.Eleveur.nom_prenom}}
        </ion-col>

      </ion-row>
4

Sorry, but I’m not seeing how that relates to either of my questions.

5

getDados() A method is used to return thed data

6

Well, it doesn’t (and can’t) return any data. It is returning a subscription. My fundamental suggestion is that the app component should do the same serviceProvider.getData().subscribe(cheval => this.cheval = cheval) operation that ChevalPage is doing.

7

in app.component.ts ??

8

Yes. Inject the same service provider both in the app component and ChevalPage and get the information from there.

9

in the constructor ??

10

How about you try that and see how it goes.

11

image
Cayjrytpture.PNG1015×465 39.5 KB
not works

12
  • Don’t post screenshots of code.
  • Case matters.
13

Error with import serviceProviser in Constructor

14

@amine216 you should write ServiceProvider instead of serviceProvider