ビューからの変更をコントローラにバインドする方法を教えてください。

Question

私はionic2/angular2のフィーリングを得ようとしており、ビューからの変更をコントローラにバインドする方法について固執しています。

以下のスニペットでは、2つのモーダルセレクトボックスを設定しましたが、どちらもコントローラにモデル変更を戻すことはありません。デフォルトにリロードします。どのように変数を返すことができますか？

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（答えに基づいて更新）：

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

編集：

あなたが複数の選択を持っている、ややバギー振る舞いがあります。私は彼らのモデルを分離する方法は、それらをion-itemの中に埋め込むことであることを発見しました。実際のバージョンでthis plunkerをチェックしてください：@Inputまたは@Outputデコレータは必要ありません。

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