Angular 2应用程序出现问题并在Internet Explorer中选择选项

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

就在我成功创建模板数组之后。但如果你问我，这应该是没有必要的

为什么IE会这样，有没有更好的方法来解决这个问题

---

编辑：它不必使用动态选项或*ngFor执行任何操作。我尝试了一个只有一个选项的静态示例，但我无法在IE 11中选择它：

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

试验

尽管我无法用静态选项重现您的问题，但如果动态选项异步加载，我们也会遇到同样的问题，请参见此

这个原因可能是这个问题没有解决。但是，还有一种变通方法可能会有所帮助：

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

{{option}}

是否为core js shim添加了脚本？没有，但我包含了Angular CLI的polyfills中的所有polyfills。ts：备注：此问题必须与Internet Explorer在动态更改后重新绘制选择选项有关。我知道StackOverflow上还有一些其他的帖子，但是也许有人知道如何解决特定角度应用的问题。

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