Wie binde ich eine Änderung von der Ansicht zurück an den Controller?

Question

Ich versuche, ein Gefühl für ionic2/angular2 zu bekommen und bin stecken geblieben, wie man eine Änderung von der Ansicht zurück an den Controller bindet.

Im folgenden Abschnitt habe ich zwei modale Auswahlfelder eingerichtet, die jedoch die Modelländerung nicht an den Controller weitergeben - es lädt die Standardwerte neu. Wie kann ich die Variablen zurückgeben?

HTML:

<ion-select [(ngModel)]="base" (ngModelChange)="loadCurrencyExchange()"> 
    <ion-option *ngFor="let b of supportedCurrencies" value="{{b}}"> 
     {{b}} 
    </ion-option> 
    </ion-select> to 

    <ion-select [(ngModel)]="symbols" (ngModelChange)="loadCurrencyExchange()" multiple="true"> 
    <ion-option *ngFor="let s of supportedCurrencies" value="{{s}}"> 
     {{s}} 
    </ion-option> 
    </ion-select> 

JS (basierend auf Antworten aktualisiert):

export class HomePage { 
    public currenciesLoaded: any; 
    public supportedCurrencies: string[]; 
    @Output() public exchangeRates: any; 
    public dataLoaded: boolean; 

    @Input() base: string = 'USD'; 
    @Input() symbols: string[] = ['EUR','RUB']; 

    constructor(public CurrencyService: CurrencyService) { 
     var base: string = this.base; 
     var symbols: string[] = this.symbols; 
     this.loadCurrencyList(); 
     this.loadCurrencyExchange(); 
    } 

    loadCurrencyList(){ 
     this.supportedCurrencies =this.CurrencyService.loadCurrencySymbols(); 
    } 

    loadCurrencyExchange(){ 
     this.CurrencyService.loadCurrencies(this.base, this.symbols) 
      .then(data => { 
       console.log(this.base + ' to ' + this.symbols.join(',')); 
       this.exchangeRates = data; 
       this.currenciesLoaded = Object.keys(data.rates); 
       this.dataLoaded = true; 
      }) 
    } 
} 

Answer 1

edit:

ein etwas buggy Verhalten ist, wenn Sie mehrere wählt haben; Ich habe herausgefunden, dass eine Möglichkeit, ihre Modelle zu isolieren, darin besteht, sie in ein ion-item; Überprüfen Sie this plunker für eine funktionierende Version: Es gibt keine Notwendigkeit für @Input oder @Output Dekorateure.

<ion-item> 
    <ion-select name="select1" [(ngModel)]="base" (ngModelChange)="loadCurrencyExchange()"> 
     <ion-option *ngFor="let b of supportedCurrencies" value="{{b}}"> 
     {{b}} 
     </ion-option> 
    </ion-select> 
    </ion-item> 

    <ion-item> 
    <ion-select name="select2" [(ngModel)]="symbols" (ngModelChange)="loadCurrencyExchange()" multiple="true"> 
     <ion-option *ngFor="let s of supportedCurrencies" value="{{s}}"> 
     {{s}} 
     </ion-option> 
    </ion-select> 
    </ion-item>