选择在Angular2/4和SAFARI中工作不正常

我在SAFARI的基本html选择组件上遇到了大问题

代码如下：

最高宣言 listProductFamily加载

this.productFamilyService.GetAll（）.subscribe(
数据=>{
this.listProductFamily=数据；
},
错误=>{
this.errorMessage=错误；
}
);  

html组件

{{f.code}}-{f.family}

问题是：

在SAFARI上加载选择时，将在选项列表的第一个值上进行设置

在Chrome，即FF上，选择设置为空值（空）

在Safari上，即使在值上设置了select，实际上绑定它的idFamily变量也没有值。。。idFamily仅在用户选择值时获取值。。。就这样

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

希望它清楚 感谢支持

删除单机版

<select class="form-control" [(ngModel)]="idFamily">
    <option *ngFor="let f of listProductFamily" [ngValue]="f.idFamily">{{f.code}} - {{f.family}}</option>
</select>

{{f.code}}-{f.family}

standalone：默认为false。如果设置为true，则ngModel 将不会在其父窗体中注册自身，并将其作为 不在形式上。如果您有表单元控件，这将非常方便， a、 k.a.嵌套在控制显示的标记中的表单元素 但不包含表单数据

---

查看AngularDoc了解更多信息：

我已通过使用和

AfterViewInit

生命周期挂钩解决了类似问题

执行以下操作将子表单值设置为

null

，有效地清除Safari设置的默认值：

ngAfterViewInit() {
  this.exampleFormName.reset();
}

注：

this.exampleFormName

属于

FormGroup

---

我还使用了

*ngFor

动态加载选项值，

reset（）

不会干扰它

我遇到过同样的问题，当ngModel属性不匹配时，Safari将选择

中的第一个项，因为它处于“空”状态，并且数组中没有匹配项。我的解决办法是添加一个匹配的空

。在你的情况下，我认为这会起作用：

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

模板：

<select [(ngModel)]="id">
   <option value=""></option>
   <option *ngFor="let item of items" [value]="item.id">{{ item.name }}</option>
</select>

{{item.name}

---

在任何一种情况下，Safari都应该在初始加载时选择空选项。

我已经按照您的建议删除了单机版，但问题仍然存在……太复杂了，无法添加，我集成了问题发布ts代码否，问题是Safari加载组件并在第一个选项上设置值。。。浏览器管理中的问题，代码为OK。您正在将idFamily设置为nulluse[ngValue]而不是value，并检查如何初始化此

。exampleFormName

？

ngAfterViewInit() {
  this.exampleFormName.reset();
}

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

export class SomeComponent {
   id = '';
}

<select [(ngModel)]="id">
   <option value=""></option>
   <option *ngFor="let item of items" [value]="item.id">{{ item.name }}</option>
</select>