問題與角2應用程序和Internet Explorer中的選擇選項

我在Internet Explorer中遇到了一個奇怪的問題，我希望有人能夠在這裏解釋我的問題。問題與角2應用程序和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（或更早可能）。出於某種奇怪的原因，如果只有一個可用，我無法選擇該選項。如果有兩個選項，則按預期工作。

在Internet Explorer中會發生以下情況：

桂呈現，在第一templates只是定義爲空數組
我了打字稿組件的方法從我寧靜的API獲取模板的名稱，並寫入結果排列成templates
gui呈現選項如預期
如果只有一個選項，它看起來被選中，但它實際上不是。如果我嘗試使用下拉菜單並手動選擇它，但它仍然沒有「真正的」選擇

我可以證明該選項不正確通過檢查綁定模型價值template選擇（保持空）和也form1.valid顯示false（form1是整個表單的名稱，請注意選擇標記是必需的）。

我發現IE到目前爲止唯一的解決方法就是到後，我右成功的模板數組定義

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

。但如果你問我，這不應該是必要的。

爲什麼IE的行爲是這樣的，有沒有更好的方法來解決這個問題？

編輯：它不具有動態選項，或者與* ngFor做任何事情。我嘗試了靜態例子只有一個選擇，我不能在IE 11中選擇：

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

來源

2017-03-15 andreas

您是否爲core-js shim添加了腳本？ – pixelbits

不，但我包含了Angular CLI的polyfills.ts中的所有polyfills：https：//github.com/angular/angular-cli/blob/master/packages/@angular/cli/blueprints/ng/files/__path__/polyfills 。ts – andreas

備註：此問題必須是有關Internet Explorer在動態更改後重新繪製選擇選項的內容。我知道在StackOverflow上還有一些關於它的文章，但也許有人知道如何解決Angular特定應用程序的問題。 – andreas

雖然我不能用靜態的選項重現您的問題，我們與動態選項同樣的問題，如果他們異步加載，請參閱這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>

來源

2017-08-10 12:20:56 Tarnschaf

問題與角2應用程序和Internet Explorer中的選擇選項

回答

相關問題