我在使用基本 html SELECT 组件的 SAFARI 上遇到了大问题。
这是代码:
顶部声明
idFamily:any = null;
listProductFamily: ProductFamily[];
listProductFamily加载
this.productFamilyService.GetAll().subscribe(
data => {
this.listProductFamily = data;
},
error => {
this.errorMessage = <any>error;
}
);
html组件
<select class="form-control" [(ngModel)]="idFamily" [ngModelOptions]="{standalone: true}">
<option *ngFor="let f of listProductFamily" [value]="f.idFamily">{{f.code}} - {{f.family}}</option>
</select>
问题是这样的:
在 Safari 当 select 被加载时,它被设置在选项列表的第一个值上。
在 Chrome 、IE、FF 选择设置为 NULL 值(空)
在 Safari 上,即使选择设置在一个值上,实际上绑定(bind)它的 idFamily 变量也没有值......只有当用户选择一个值时,idFamily 才会获得一个值......就是这样。
我不知道如何解决这个问题...
希望它清楚
感谢支持
最佳答案
我遇到了同样的问题,Safari 会选择 <select>
中的第一项。当 ngModel 属性不匹配时,因为它处于“空”状态并且数组中没有匹配项。我的解决方法是添加一个匹配的空 <option>
.在您的情况下,我认为这将起作用:
<select class="form-control" [(ngModel)]="idFamily">
<option [value]="null"></option>
<option *ngFor="let f of listProductFamily" [value]="f.idFamily">{{f.code}} - {{f.family}}</option>
</select>
在我们的例子中,我们使用 uuids 作为模型 id,所以我们使用空字符串作为初始值。零件:
export class SomeComponent {
id = '';
}
模板:
<select [(ngModel)]="id">
<option value=""></option>
<option *ngFor="let item of items" [value]="item.id">{{ item.name }}</option>
</select>
在任何一种情况下,Safari 都应该在初始加载时选择空选项。
关于angular - SELECT 在 Angular2/4 和 SAFARI 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51652547/