Passing Data Between component

Ionic Framework ionic-v3
1

I need to pass the information that I select in the ion-option elements, in the same page, and that when I want to select another one, it is not deleted.

HTML

<ion-header>
    <ion-navbar>

      <ion-title>
        Compra
      </ion-title>

      <ion-buttons end>
        <button ion-button icon-only (click)="logOut()">
          <ion-icon name="log-out"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar> 
  </ion-header>

<ion-content padding>

    <ion-grid>
        <ion-row>

          <ion-col col-3>
              <button ion-button icon-start (click)="SendData()"><ion-icon name="add" ></ion-icon>Agregar</button>
          </ion-col>


          <ion-col col-1>
            <button ion-button icon-only><ion-icon name="search"></ion-icon></button>
          </ion-col>


          <ion-col col-8> 
            <ion-item> 
              <ion-label>Productos</ion-label> 
              <ion-select [(ngModel)]="ProductoSelec" (ionChange)="CambioProducto()" FormControlName="Producto"> 
                <ion-option *ngFor="let p of productos" value="{{jsonStringify(p)}}">{{p.i}} | {{p.p}}</ion-option> 
              </ion-select> 
            </ion-item> 
          </ion-col> 


          <ion-col col-6> 
            <ion-item> 
              <ion-label>Paquete</ion-label> 
              <ion-select [(ngModel)]="PaqueteSelec" (ionChange)="CambioPaquete()" FormControlName="Paquete"> 
                <ion-option *ngFor="let p of Paquetes" value={{p.p}}>{{p.u}} - {{p.p}}</ion-option> 
              </ion-select> 
            </ion-item> 
          </ion-col> 

          <ion-col col-6> 
            <ion-item> 
              <ion-input [(ngModel)]="numpad" type="tel" placeholder="Cantidad" min="0" icon></ion-input> 
            </ion-item> 
          </ion-col> 


        </ion-row> 
    </ion-grid> 

    <ion-grid> 
      <ion-row> 
        <ion-col col-1 text-center><b>#</b></ion-col> 
        <ion-col col-2 text-center><b>Cod.</b></ion-col> 
        <ion-col col-3 text-center><b>Producto</b></ion-col> 
        <ion-col col-1 text-center><b>Cnt.</b></ion-col> 
        <ion-col col-1 text-center><b>Und.</b></ion-col> 
        <ion-col col-3 text-center><b>Precio</b></ion-col> 
        <ion-col col-1 text-center></ion-col> 
      </ion-row> 
    </ion-grid> 

    <ion-grid>
        <ion-row>
          <ion-col col-1 text-center></ion-col>
          <ion-col col-2 text-center></ion-col>
          <ion-col col-3 text-center></ion-col>
          <ion-col col-1 text-center></ion-col>
          <ion-col col-1 text-center></ion-col>
          <ion-col col-3 text-center></ion-col>
          <ion-col col-1 text-center></ion-col>
        </ion-row>
    </ion-grid>

    <button ion-button full (click)=goBonificacion()>Bonificacion</button>

</ion-content>

TS

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { ClientesPage } from '../clientes/clientes'
import { RestProvider } from '../../providers/rest/rest';
import { AlertController } from 'ionic-angular';
import { BonificacionPage } from '../bonificacion/bonificacion';
import { ProductosPage } from '../productos/productos';



@IonicPage()
@Component({
  selector: 'page-compra',
  templateUrl: 'compra.html',
})

export class CompraPage {
  prod: any[]; 
  productos = [];
  $scope: any;
  listas_productos: any[];
  ProductoSelec: any;
  PaqueteSelec: any;
  Paquetes = [];
  
  
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public restProvider: RestProvider,
              public alertCtrl: AlertController,
                ) {
                this.getData();
  } 


    getData() { 
      this.restProvider.getData() 
      .then(data => { 
        this.prod = JSON.parse(decodeURIComponent(data as any)); 
        if (this.prod.hasOwnProperty("listas_productos")) { 
          this.productos = JSON.parse(this.prod['listas_productos'][0].productos);
          console.log(this.productos); 
          console.log(164) 
        } 
      }); 
    } 


    ionViewDidLoad() { 
      console.log('ionViewDidLoad CompraPage');
    }


    logOut() {
      this.navCtrl.push(HomePage);
      console.log('Logout')
    }


    goTomapedidos():void {
      this.navCtrl.push(ClientesPage);
      console.log('Clientes Page'); 
    }


    goProdcutos():void {
      this.navCtrl.push(ProductosPage);
      console.log('Clientes Page'); 
    }


    goBonificacion() {
      this.navCtrl.push(BonificacionPage)
      console.log('Bonificacion Page')
    }

    CambioProducto() {
      let seleccionado = JSON.parse(this.ProductoSelec)
      console.log(JSON.parse(this.ProductoSelec))
      this.Paquetes = seleccionado.e
    }

    CambioPaquete() { 
      console.log(this.PaqueteSelec)
    } 

    jsonStringify (value) {
      return JSON.stringify(value)
    }

  }