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

Question

我在使用基本html SELECT组件的SAFARI上遇到了大问题。

这是代码：

顶部声明

idFamily:any = null;
listProductFamily: ProductFamily[];

listProductFamily loading

    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 上，在加载选择后，将其设置在选项列表的第一个值上。

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

在Safari上，即使选择实际上是在值上设置的，绑定到它的idFamily变量也没有值...仅当用户选择一个值时，idFamily才会获取值。

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

希望它清晰 感谢支持

Answer 1

删除独立版

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

  

独立：默认为false。如果将其设置为true，则ngModel   不会以其父表格注册自己，并且会像   不在表格中。如果您具有表单元控件，这会很方便，   也就是嵌套在标签中的用于控制显示的表单元素   表单，但不包含表单数据。

检查AngularDoc以获得更多信息：https://angular.io/api/forms/NgModel#options

Answer 2

我通过使用reactive forms和AfterViewInit生命周期挂钩解决了类似的问题。

执行以下操作会将子表单值设置为null，有效清除Safari设置的默认值：

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

注意：this.exampleFormName的类型为FormGroup

我还使用*ngFor动态地加载选项值，而reset()不会对其造成干扰！

Answer 3

我也遇到了同样的问题：ngModel属性不匹配时，Safari将在function populatebrand(b1,m1){ var b1=document.getElementById(b1); var m1=document.getElementById(m1); m1.innerHTML=""; if (b1.value == "Audi") { var optionArray = ['|Select Model*',"A1|A1","A2|A2","TTS|TTS",'Other|Other']; } else if (b1.value == "BMW") { var optionArray = ["|Select Model","F06 06 SERIES|F06 06 SERIES","G02 X4|G02 X4", "G29 Z4|G29 Z4","G20 3 SERIES|G20 3 SERIES", "I01 I3|I01 I3","I12 I8|I12 I8",'Other|Other']; } else if (b1.value == "Other") { var optionArray = ['other|Other']; } for (var option in optionArray){ var pair = optionArray[option].split("|"); var newOption = document.createElement("option"); newOption.value=pair[0]; newOption.innerHTML=pair[1]; m1.options.add(newOption); } } 中选择第一项，因为它处于“空”状态并且数组中没有匹配项。我的解决方法是添加一个匹配的空<select>。对于您而言，我认为这会起作用：

<option>

在本例中，我们将uuid用于模型ID，因此将空字符串用于初始值。组件：

<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 = '';
}

无论哪种情况，Safari都应在初始加载时选择空选项。