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

发布时间：2020-12-17 17:09:20 所属栏目：安全来源：网络整理

导读：我在Internet Explorer中遇到了一个奇怪的问题,我希望有人能够在这里向我解释这个问题. 在我的Angular 2应用程序中,我有一个带有选择框的表单.用户可以在不同的模板(名称)之间进行选择. templates属性是一个数组,在TypeScript组件文件中定义,并填充可能的模

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

整个过程按预期工作(Chrome,Firefox),除非我使用Internet Explorer 11(可能更早).出于某些奇怪的原因,如果只有一个可用,我无法选择该选项.如果有两个选项,则按预期工作.

在Internet Explorer中,会发生以下情况：

> gui渲染,首先模板被定义为空数组
>我在TypeScript组件中的方法从我的restful API获取模板名称,并将结果作为数组写入模板
> gui按预期提供选项
>如果只有一个选项,它看起来是选中但实际上不是.如果我尝试使用下拉菜单并手动选择它,它仍然不会“真正”选择

我可以通过检查绑定的模型值模板(保持为null)以及form1.valid显示false来证明该选项未正确选择(form1是整个表单的名称,请注意select标记是必需的).

到目前为止,我为IE找到的唯一解决方法就是定义

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

我成功完成模板数组后.但如果你问我,这不应该是必要的.

为什么IE会以这种方式运行,并且有更好的方法来解决这个问题吗？

编辑：它不需要对动态选项或* ngFor做任何事情.我尝试了一个只有一个选项的静态示例,我无法在IE 11中选择它：

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

解决方法

虽然我无法使用静态选项重现您的问题,但如果它们是异步加载的,我们遇到了动态选项的相同问题,请参阅此 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!