イオン2：<ion-select>をオプションのキーにバインドするにはどうすればいいですか？

Question

私は最初のIonic 2アプリを開発しています。動的なオプションリストを持つ<ion-select>があります。このリストは、（stateOptions命名）簡単な辞書としての私のコンポーネントで表現されています。私の見解では

import { Component } from '@angular/core'; 

@Component({ 
    templateUrl: './test.html' 
}) 
export class TestPage { 

    stateOptions: { 
     al: 'Alabama', 
     ak: 'Alaska', 
     az: 'Arizona', 
     ar: 'Arkansas' 
    } 

    customer: { 
     street_address: '123 Sunshine Lane', 
     city: 'Phoenix', 
     state: 'az' 
    } 

} 

、私はcustomer.stateが選択状態のキーに設定されますように<ion-select>を設定したいと思います。たとえば、ユーザーがプルダウンから「Arkansas」を選択した場合、customer.stateの値は文字列「ar」になります。 どうすればいいですか？アンギュラ1では

<ion-item> 
    <ion-label>State</ion-label> 
    <ion-select [(ngModel)]="customer.state"> 
     <ion-option *ngFor="???"></ion-option> 
    </ion-select> 
</ion-item> 

<p>Current value of customer.state: {{ customer.state }}</p> 

、これは簡単にngOptionsディレクティブで実現されます。

<select ng-model="customer.state" ng-options="abbr as name for (abbr, name) in stateOptions"></select> 

...しかし<ion-select>がこれをサポートしていないように思えます。

これは、私が見た1つの解決策です：初期化時に、stateOptionsを扱いやすい形式に変換してください。この作品

<ion-select [(ngModel)]="customer.state"> 
    <ion-option *ngFor="let stateOption of stateOptionsFormatted" [value]="stateOption.abbr">{{ stateOption.name }}</ion-option> 
</ion-select> 

が、それは1

角度でワンライナー何かを達成するために、余分な定型コードです：

stateOptionsFormatted: Array<Object> = []; 

constructor() { 
    for (var key in this.stateOptions) { 
     this.stateOptionsFormatted.push({ 
      abbr: key, 
      name: this.stateOptions[key] 
     }); 
    } 
} 

とビューで：コンポーネントでは、私はこれを行うことができます

私はまた、ビューでこの変換を行うためのカスタムパイプを含む解決策を見ました - しかし、他の人は、パフォーマンスが悪いと言いました。なぜなら、ユーザーがページとやり取りするときに何度も実行されるからです。

もっと良い選択肢はありますか？私のアプリの中には多くの<ion-select>があるので、私はそれが利用可能な場合、何かクリーンで簡潔なものを好むだろう。

ありがとうございます！

Answer 1

、あなたはまた、コンポーネントクラスのarray -propertyとしてstateOptionKeysを宣言する必要が

this.stateOptionKeys = Object.keys(this.stateOption); 

、として

<ion-select [(ngModel)]="customer.state"> 
    <ion-option *ngFor="let key of stateOptionKeys"></ion-option> 
</ion-select> 

のようにObject.keys()を使用して、コンポーネントのngOnInit()メソッド内stateOptionKeysを定義することができます。