Angular / Select / formControl / 默认值答案

【问题标题】：Angular / Select / formControl / default valueAngular / Select / formControl / 默认值
【发布时间】：2020-09-29 14:19:05
【问题描述】：

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

我尝试了几种通过 Internet 找到的解决方案，但找不到正确的实现方式。

谁有工作的例子，谢谢。

下面（部分）我的代码

.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 (formControl)

// 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"}

【问题讨论】：

检查这个：netbasal.com/…

标签： html angular typescript

【解决方案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 对象和国家/地区的国家对象（卢森堡）虽然具有完全相同的属性，但由于 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;
}

工作DEMO

【讨论】：

【解决方案3】：

干净且正确的方法是在 select 标签上使用 ngModel 绑定。

这是我在另一篇文章中提交的答案，带有参考和 Stackblitz 示例：

https://stackoverflow.com/a/64082745/450388

【讨论】：