Html 角度/选择/窗体控制/默认值

我正在试图找到一种方法，将选项标记为“我的选择”中的“已选择”，但未成功

我尝试了在互联网上找到的几种解决方案，但找不到正确的实现

有没有人有一个有效的例子，谢谢

下面（部分）是我的代码

.html

<form [formGroup]="fgForm">
...
<select class="form-control" formControlName="country">
    <option value="" [ngValue]="null">Choose your country</option>
    <option 
        *ngFor="let oneCountry of selOptCountries;" 
        [ngValue]="oneCountry"
    >{{oneCountry.name}}</option>
</select>
</form>

// The data comes from an API
this.selOptCountries = [
{"id": 2516, "name": "Austria", "iso2": "AT"},
{"id": 2519, "name": "Belgium", "iso2": "BE"},
{"id": 2523, "name": "Bulgaria", "iso2": "BG"},
{"id": 2601, "name": "Croatia", "iso2": "HR"},
...
{"id": 2636, "name": "Luxembourg", "iso2": "LU"}
...
];

this.fgForm = this.formBuilder.group({
'country': [
        {value: datas.country,disabled: false},
        [Validators.required]
    ],
});

国家数据

{id: 2636, name: "Luxembourg", iso2: "LU"}

---

不要直接用

datas.country

设置值，而是这样写：

value:this.selOptCountries.find（c=>c.id==datas.country.id）

演示

由于JavaScript中的每个对象都是唯一的，因此各国的

datas.country

对象和国家对象（卢森堡）虽然具有完全相同的属性，但不能被识别为相同

来自MDN

---

---

在JavaScript中，对象是引用类型。两个不同的对象永远不相等，即使它们具有相同的属性。只有将同一对象引用与其自身进行比较时，才会得出正确的结果。

如果将选择选项值设置为对象而不是id等，则需要使用

compareWith

指令来比较该值

<form [formGroup]="fgForm">
 <select class="form-control" formControlName="country" [compareWith]="selectedVal">
<option [ngValue]="">Choose your country</option>
<option 
    *ngFor="let oneCountry of selOptCountries;" 
    [ngValue]="oneCountry"
>{{oneCountry.name}}</option>
</select>

---

工作

清洁正确的方法是在select标记上使用ngModel绑定

以下是我在另一篇文章中提交的答案，其中有参考和Stackblitz的工作示例：

检查以下内容：

selectedVal(valOne, valTwo ) : boolean {
  return valOne.id === valTwo.id;
}