AngularJSとTypeScriptを使用したselectタグの列挙型の双方向バインディング

Question

私はいくつかの変数とgenericEnum型の変数の1つを含むデータベースからオブジェクトを受け取っています。genericEnumはそのように定義されています。

export enum GenericEnum { 
    optionOne = 1, 
    optionTwo = 2, 
    optionThree = 3, 
    optionFour = 4, 
    optionFive = 5, 
    optionSix = 6 
} 

だから、今、このオブジェクトがダウン来て、変数はちょうどselectOptionsそれを呼びましょう、ダウンデータベースから来て、私は2つの方法にしようとしているので、

selectOptions: GenericEnum = 4; 

4に等しく、その変数をselectタグにバインドします。オプションが選択された場合は「optionSix」、その変数の値は4から6に変更されます。

ここまでは、この問題を解決しようとしているHTMLです。

<select ng-model="$ctrl.myObject.selectOptions"> 
       <option value="1">Option One</option> 
       <option value="2">Option Two</option> 
       <option value="3">Option Three</option> 
       <option value="4">Option Four</option> 
       <option value="5">Option Five</option> 
       <option value="6">Option Six</option> 
      </select> 

ページの読み込み時には、読み込み時に変数の現在の値と同じように事前に選択されたオプションが表示されるのが理想的です。したがって、ドロップダウンボックスには「オプション4」と表示されます。次に、「オプション6」を選択してその選択肢を保存し、ページをリロードすると、変数「selectOptions」は6になるので、ドロップダウンボックスは「オプション6」と事前に選択されます

今すぐページを読み込むときに、ドロップダウンボックスが「オプション4」として読み込まれる代わりに空白として読み込まれます。ボックスを展開すると、すべてのオプションが選択できますが、変数selectOptionsは4に等しいので、ドロップダウンボックスがデフォルトでこのオプションを選択すると予想しましたが、そうではないようです。私はそれがTypeScriptがenumをどのように変換するかと関係があると思います。

は、例えば、これは私がNGリピートの（キー、値）の能力を活用について何かを読んでいた別のスタックオーバーフローの私の列挙

Typescript Playground Enum Example

の結果のjavascriptのですが、にそれを得るために失敗しましたそれが私のためのルートではないのだろうかと疑問に思います。

select要素の予想される動作を十分に説明していない場合は、私に知らせてください。より多くの情報を提供しようとすることができます。

Answer 1

ソリューションの一般的な要点が必要な場合は、下部にdrがあります。

私はこの問題の解決策を見つけることになったので、他の誰かが将来的に役立つかもしれない場合は、誰とでも共有したいと思っていました。

はこのページのための私の角度コントローラでは、私はそう

selectOptionTypes: any[] = []; 

$onInit(): void { 
    this.buildSelectOptionTypesList(); 
} 

buildSelectOptionTypesList =() => { 
    this.selectOptionTypes.push({ value: 1, key: 'Option One' }); 
    this.selectOptionTypes.push({ value: 2, key: 'Option Two' }); 
    this.selectOptionTypes.push({ value: 3, key: 'Option Three' }); 
    this.selectOptionTypes.push({ value: 4, key: 'Option Four' }); 
    this.selectOptionTypes.push({ value: 5, key: 'Option Five' }); 
    this.selectOptionTypes.push({ value: 6, key: 'Option Six' }); 
} 

ような配列は、次にHTMLで、私はそうのようなNG-オプションとngのモデルを使用してSELECT文を作成したとして、私の列挙を再構築しなければなりませんでした。

<select 
    ng-model="$ctrl.myObject.selectOptions" 
    ng-options="option.value as option.key for option in $ctrl.selectOptionTypes" 
> 
</select> 

これは

myObject.selectOptionsがダウンしてから来ました「myObject.selectOptions」、6つの項目のダウンボックスおよび負荷に私の降下が事前に選択することになり、私のモデル変数の数値に対応した方のオプション生成4の値を持つデータベースを使用すると、ドロップダウンボックスの4番目のオプションが自動的に選択されて表示されます。また、両方の手で、データベース内の値を変更する際に、またはドロップで別のオプションを選ぶを通じてダウン変数の値が変わってしまうボックス、および負荷にドロップダウンボックスには、その新しい変更を反映することになります。

だから、これは私が動的に選択= NG-モデルを介した双方向バインド変数の現在の値に基づいて、「選択」にHTMLを選択タグにオプションを設定することが分かってきたソリューションです。

要約：変数の型がenumの場合は、その列挙型をコントローラの配列として再構築します。あなたの変数に等しくなるように、あなたのngのモデルを設定し、キーと値の能力に建てられたNG-オプションを活用し、あなたの列挙型の配列バージョンに関連して、設定されたNG-オプション。

ng-optionsの詳細については、Angular's Directivesのドキュメントhereを参照してください。