Angular 选择输入的被动形式设置值

我正在尝试自动填充选择输入。 当表单打开时，select的值未填充，这是我的代码

我有一个静态对象数组（

extensions

），用户可以从中进行选择。此数组属于

CountryCode[]

类型

查看.component.ts

<form [formGroup]='form' autocomplete="off">
...
   <select class="form-control" formControlName='cellExtInput'>

       <option *ngFor="let ext of extensions" [ngValue]="ext">
          ({{ ext.callingCode }}) {{ ext.name }}
       </option>

   </select>
...
</form>

export interface CountryCode {
  id: any,
  code3l: any,
  code2l: any,
  name: any,
  flag: any,
  callingCode: any,
}

async ngOnInit() {    


    // Initialize form
    this.form = new FormGroup({
      ...      
      cellExtInput: new FormControl(''),
    });

    var controls = this.form.controls;

    var code : CountryCode = {
      id: "131",
      code3l: "PRT",
      code2l: "PT",
      name: "Portugal",
      flag: "http://flags.fmcdn.net/data/flags/w580/pt.png",
      callingCode: "+351"
    }

    controls.cellExtInput.setValue(code, {onlySelf: true});

    ......
}

试一试

（{ext.callingCode}}{{ext.name}}

我认为您对

ngValue

有问题。您正在为它指定一个对象，而不是一个基元类型，

接受基元类型的值

如上所述

属性|值|描述

disabled | disabled |指定应禁用某个选项

标签|文本|为选项指定较短的标签

selected | selected |指定在页面打开时应预先选择选项 装载

value | text |指定要发送到服务器的值

---

注意：OP仅将代码中的

[ngValue]

更改为

[value]

。

请澄清什么不起作用，即您所说的“我无法正确处理”是什么意思@AndrewAllen，因为我在onInit（）上指定了.setValue（），当表单打开时，选择选项未填充。请尝试

({{ext.callingCode}}{ext.name}

我认为您也有问题，因为您指定的

ngValue

是一个对象而不是一个基元类型，

接受基元的值types@haron68请提交此答案，以便我将其标记为正确。我只将[ngValue]更改为[Value]如果使用的是

formControlName

指令，则不需要

[selected]

。所选值将根据表单组中的状态进行设置。

   <select class="form-control" formControlName='cellExtInput'>

       <option *ngFor="let ext of extensions" [value]="ext">
          ({{ ext.callingCode }}) {{ ext.name }}
       </option>

   </select>