html - Angular/选择/formControl/默认值

我正在尝试找到一种方法在我的选择框中将选项标记为已选，但我没有成功。

我尝试了在网上找到的几种解决方案，但都没有找到正确的实现方法。

有人有一个可用的例子吗，谢谢。

下面是我（部分）的代码

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

.ts（表单控件）

// 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]
    ],
});

datas.country

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

答案＃1

不要直接使用 datas.country 设置值，而是这样写：

value: this.selOptCountries.find(c => c.id === datas.country.id)

演示

https://stackblitz.com/edit/object-option-item?file=src/app/app.component.ts

尽管 datas.country 对象和 countries 中的国家对象（卢森堡）具有完全相同的属性，但它们并不被认为是相同的，因为 JavaScript 中的每个对象都是唯一的。

来自 MDN

在 JavaScript 中，对象是一种引用类型。两个不同的对象永远不相等，即使它们具有相同的属性。只有将同一个对象引用与自身比较时才会返回 true。

答案＃2

如果你将选择框的选项值设置为对象而不是 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>

在 .ts 中

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

工作演示