Internet ExplorerでAngular 2アプリケーションと選択オプションの問題

Question

Internet Explorerで奇妙な問題が発生しましたが、誰かが私にこの問題を説明できることを願っています。

私のAngular 2アプリでは、選択ボックス付きのフォームがあります。ユーザーは、異なるテンプレート（名前）の中から選択できます。 templatesプロパティは配列であり、TypeScriptコンポーネントファイルで定義され、可能なテンプレート名で埋められます。

次のようにHTMLテンプレートに見える：

<select required [(ngModel)]="template"> 
    <option *ngFor="let t of templates" [ngValue]="t">{{ t }}</option> 
</select> 

<button type="button" [disabled]="!form1.valid" (click)="nextForm()">Next</button> 

私は、Internet Explorer 11（およびおそらくそれ以前）を使用しない限り、全体の事は、予想（クロム、Firefoxの）として動作します。いくつかの奇妙な理由のために、利用可能なオプションが1つしかない場合は、このオプションを選択できません。 2つのオプションがある場合、期待どおりに動作します。

Internet Explorerで次の処理が行われます。

• GUIが最初templatesで、レンダリングがちょうど空の配列として定義されている
• 活字体の構成要素で私の方法は、私の安らかなAPIからテンプレート名を取得し、書き込み
• 予想通りtemplates
• への配列は、GUIオプション（複数可）をレンダリングするよう一つだけのオプションがある場合、結果は、選択に見えますが、それは実際にはありません。私は、ドロップダウンを使用して手動で選択しようとした場合、それはまだ私はオプションが適切にバインドされたモデル値templateをチェックすることで選択されていないことを証明することができます「本当に」

を選択しない（nullのまま）とform1.validにはfalseが表示されます（form1はフォーム全体の名前ですが、selectタグが必要です）。

IEはこれまでのところ、ちょうど私に成功したテンプレートの配列の後に

if (this.templates.length > 0) this.template = this.templates[0] 

を定義することであるために私が見つけた唯一の回避策。しかし、あなたが私に尋ねるなら、これは必要ではないはずです。

IEはこのように動作していますが、これを一般的に解決するにはより良い方法がありますか？

---

EDIT：それは、動的なオプションまたは* ngForで何もする必要はありません。私はちょうど1つのオプションで静的例を試してみましたが、私はIE 11でそれを選択することはできません：私は、静的なオプションを使用して問題を再現することはできませんが、彼らは非同期でロードされている場合は、私たちはダイナミックなオプションと同じ問題を抱えていた

<select required [(ngModel)]="template"> 
    <option>Test</option> 
</select> 

Answer 1

、参照このPlunker。

この理由は未解決のAngular issueである可能性があります。しかし、回避策もあります：

<form #editForm="ngForm"> 
    <select name="select"> 
     <option *ngIf="!editForm.value.select" [ngValue]="null" selected></option> 
     <option *ngFor="let option of options" [ngValue]="option">{{option}}</option> 
    </select> 
</form>