Angular 如何将默认动态值设置为下拉

我有两个来自DB的值，我想将其中一个值设置为下拉表单元素的默认值，尝试了很多方法，但无法解决这个问题

my.ts:

my.html

{{phoneType.name}

---

但我看到默认值是绑定的，我看不到默认值即将出现。

正如@AJT_82在上述评论中所建议的，我删除了[（ngModel）]属性，并使用setVale填充：

<div id = "someId">
 <select formControlName="phoneType">
   <option *ngFor="let phoneType of phoneTypes" [value]="phoneType.code" >{{phoneType.name}}</option>
 </select> 
</div>

---

根据@AJT_82在上述评论中的建议，我删除了[（ngModel）]属性，并使用setVale填充：

<div id = "someId">
 <select formControlName="phoneType">
   <option *ngFor="let phoneType of phoneTypes" [value]="phoneType.code" >{{phoneType.name}}</option>
 </select> 
</div>

---

伟大的答案已经张贴。在这里，我发布了一个通用的解决方案，用于在被动表单场景中的选择（下拉菜单）中选择默认值

假设您有一个模型类Fruit，该类的数组通过服务器返回。为了模拟这种情况，我使用“of”rxjs操作符创建了一个可观察对象

import{from，of}from'rxjs'；
出口级水果{
公众Id：号码；
公共标题：字符串；
}
导出常数=的([
{Id:1，标题：'Apple'}，
{Id:2，标题：'Banana'}，
{Id:3，标题：'Orange'}，
{Id:4，标题：'菠萝'}，
{Id:5，标题：'草莓'}
]);伟大的答案已经发布。在这里，我发布了一个通用的解决方案，用于在被动表单场景中的选择（下拉菜单）中选择默认值

假设您有一个模型类Fruit，该类的数组通过服务器返回。为了模拟这种情况，我使用“of”rxjs操作符创建了一个可观察对象


import{from，of}from'rxjs'；
出口级水果{
公众Id：号码；
公共标题：字符串；
}
导出常数=的([
{Id:1，标题：'Apple'}，
{Id:2，标题：'Banana'}，
{Id:3，标题：'Orange'}，
{Id:4，标题：'菠萝'}，
{Id:5，标题：'草莓'}
]);
要动态设置默认值，我使用了@rxweb/反应式表单验证程序的
FormBuilderConfiguration
，从中可以动态设置formControl的
defaultValue

您需要在应用程序模块中导入
ReactiveFormsModule

以下是完整的组件代码：


从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormGroup}
从“@rxweb/reactive form validators”导入{RxFormBuilder，FormBuilderConfiguration}；
从“./User.model”导入{User}；
@组成部分({
选择器：'应用程序电话添加'，
templateUrl:“./phone.component.html”
})
导出类phoneComponent实现OnInit{
userFormGroup:FormGroup
电话类型=[“类型1”，“类型2”]；
建造师(
私有表单生成器：RxFormBuilder）{}
恩戈尼尼特（）{
让用户=新用户（）；
var formBuilderConfig=new FormBuilderConfiguration（）；
formBuilderConfig.propsConfig={'phoneType'：
{defaultValue:this.phoneTypes[0]}
this.userFormGroup=this.formBuilder.formGroup（用户，formBuilderConfig）；
}
}

卡片类型
{{item}}
提交
要动态设置默认值，我使用了@rxweb/reactive form validators的
FormBuilderConfiguration
，从中可以动态设置formControl的
默认值

您需要在应用程序模块中导入
ReactiveFormsModule

以下是完整的组件代码：


从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormGroup}
从“@rxweb/reactive form validators”导入{RxFormBuilder，FormBuilderConfiguration}；
从“./User.model”导入{User}；
@组成部分({
选择器：'应用程序电话添加'，
templateUrl:“./phone.component.html”
})
导出类phoneComponent实现OnInit{
userFormGroup:FormGroup
电话类型=[“类型1”，“类型2”]；
建造师(
私有表单生成器：RxFormBuilder）{}
恩戈尼尼特（）{
让用户=新用户（）；
var formBuilderConfig=new FormBuilderConfiguration（）；
formBuilderConfig.propsConfig={'phoneType'：
{defaultValue:this.phoneTypes[0]}
this.userFormGroup=this.formBuilder.formGroup（用户，formBuilderConfig）；
}
}

卡片类型
{{item}}
提交
您正在使用formcontrol和ngModel。首先选择模板驱动（或者只是ngModel）或反应式表单。另外，我希望您在没有formgroup的情况下使用
formControlName
时会出现错误？？无论如何，请阅读文档：我从一个示例中选取了ngModel。。我还可以使用什么选项来设置该值。您阅读文档了吗？您的代码中存在一些问题。首先，您需要阅读以下内容：然后，如果您选择使用formcontrol，则有
setValue
用于在以后的状态下设置值：是的，我已经了解了这一点，并且理解我们不应该将ngModel用于反应式表单。谢谢，我能够使用设置值填充值。您正在使用formcontrol和ngModel。首先选择模板驱动（或者只是ngModel）或反应式表单。另外，我希望您在没有formgroup的情况下使用
formControlName
时会出现错误？？无论如何，请阅读文档：我从一个示例中选取了ngModel。。我还可以使用什么选项来设置该值。您阅读文档了吗？您的代码中存在一些问题。首先，您需要阅读以下内容：然后，如果您选择使用formcontrol，则有
setValue
用于在以后的状态下设置值：是的，我已经了解了这一点，并且理解我们不应该将ngModel用于反应式表单。谢谢，我能够用设置值填充值。
<div id = "someId">
 <select formControlName="phoneType">
   <option *ngFor="let phoneType of phoneTypes" [value]="phoneType.code" >{{phoneType.name}}</option>
 </select> 
</div>

const phones = this.myForm.get('phones') as FormArray;
        phones.at(0).get('phoneType').setValue('Apple');