Javascript 选择array angular 7 safari第一个索引的下拉值默认值

我正在使用Safari，并尝试在select dropddown中将数组第一个索引设置为默认选项，但它在默认情况下没有显示任何选项。我不想在代码端处理这个问题，因为有些值可能来自服务

我尝试了selected=“selected”，但没有帮助

我们有没有办法直接将选项设为默认值？还是人工

下面是我的代码和stackblitz

@组件({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
建造师(
公共表单：FormBuilder
) {}
名称='5'；
所选国家/地区：任何；
公共下拉列表：FormGroup；
CountryDrown=[]；
城市={}；
地点={}；
文本={}；
countriesValue=[{
“id”：1，
“姓名”：“法国”
}, {
“id”：2，
“名称”：“德国”
}, {
"id":3,，
'姓名'：'意大利'，
}]
国家=[{
“id”：1，
'姓名'：'法国'，
“城市”：[“巴黎”]，
“地点”：[
“埃菲尔塔”，
“新发现”
],
“文本”：[a']
},
{
“id”：2，
“名称”：“德国”，
“城市”：[“汉堡”]，
‘地点’：[]，
“文本”：[b']
},
{
"id":3,，
'姓名'：'意大利'，
‘城市’：[‘罗马’、‘米兰’、‘那不勒斯’]，
“地点”：[
“埃菲尔塔”，
“新发现”
],
“文本”：[c']
},
];
恩戈尼尼特（）{
本条第1款；
此.serviceGetCountries（）；
this.dropdown=newformgroup({
国家/地区：新FormControl（），
城市：新表单控件（），
地点：new FormControl（），
文本：新表单控件（）
});
}
getCountries（）{
可观察的返回值（此countriesValue）；
}
serviceGetCountries（）{
this.getCountries（）.subscribe（res=>{
this.countrydrown=res；
console.log（this.countrydrown）；
});
}
onChange（设备值）{
console.log（设备值）；
this.getValues（deviceValue）.subscribe（res=>{
控制台日志（res）；
this.cities=res.filter（x=>x.id==deviceValue）[0]；
this.places=this.countries.filter（x=>x.id==deviceValue）[0].places；
this.text=this.countries.filter（x=>x.id==deviceValue）[0].text；
log（Object.keys（this.places））；
console.log（this.cities）；
});
}
获取值（val）{
（本）国家的可观测收益；
}
}

{{country.name}
{{城市}
{{place}}
{{text}}：

您需要在formGroup中设置默认值，如：

this.dropdown = this.form.group({
    country: [1, Validators.required], //1 is the default value 
    ... (your others FormControl)
});

在视图中，只需执行以下操作：

          <option
            *ngFor="let option of options"
            [value]="option.value"
            [innerHTML]="option.label"></option>

这是我的解决方案

在模板上

我希望这能有所帮助

[编辑]

---

当您声明属性

defaultSelect=“default”

时，

中的值将设置为

“default”

，并且选择了

第一个选项。下拉列表中的
选择城市
将始终首先被选中并显示
我们可以不提供额外选项并显示第一个索引吗？是的，我们可以。我们只需要将此
[attr.selected]=“i==0？true:null”
添加到您希望默认选中的选项中。它将变成这样
{{this}}
。此主题=>[可能对您的上半部分有用question@atitpatel我看到你在stackblitz上更新了它。它应该可以工作了，谢谢。但是如果没有这个，有可能在html中呈现第一个索引吗？
<select formControlName="country" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
       <option value = "default" selected> Select Cities </option>
       <option *ngFor="let country of countrydrodown" [value]="country.id">{{country.name}}</option>
</select>

<select formControlName="city" id="sel1" class="">
       <option value = "default" selected> Select Cities </option>
       <option *ngFor="let city of cities" [ngValue]="city">{{city}}</option>
</select>

public defaultSelect = "default";