angular - SELECT 在 Angular2/4 和 SAFARI 中无法正常工作

Question

我在使用基本 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 才会获得一个值......就是这样。

我不知道如何解决这个问题...

希望它清楚
感谢支持

Answer 1

我遇到了同样的问题，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 都应该在初始加载时选择空选项。