Angular 角度选择选项字段不显示

我使用的是

Angular 6

在component.html文件中，我使用FormGroup，选择字段如下

<select formControlName="mode_of_payment" type="text" id="input-mode-of-payment" class="form-control">
    <option *ngFor="let mode of modeOfPayments" [(ngValue)]="mode.id" [selected]="mode.id === amountGiven?.mode_of_payment">{{ mode.title }}</option>
</select>

{{mode.title}}

组件.ts文件包含

amountGiven: AmountGiven;
updateMoneyForm: FormGroup;
modeOfPayments: Array<ModeOfPaymentData>;

ngOnInit() {

  this._initializeForm();

  // Get mode of payments
  this._getModeOfPayments();
}



private _initializeForm() {
  this.updateMoneyForm = this.formBuilder.group({
    mode_of_payment: new FormControl(),
  });
}

private _getModeOfPayments() {
  this.modeOfPaymentService.list().subscribe(
    res => {
      this.modeOfPayments = res;
      this._setFormValue();
    }
  );
}

private _setFormValue() {
  this.updateMoneyForm.setValue({
    mode_of_payment: this.amountGiven.mode_of_payment,
  });
}

amountGiven：amountGiven；
updateMoneyForm:FormGroup；
支付方式：数组；
恩戈尼尼特（）{
这个._initializeForm（）；
//获取付款方式
这是付款方式（）；
}
private_initializeForm（）{
this.updateMoneyForm=this.formBuilder.group({
付款方式：new FormControl（），
});
}
私人支付方式{
此.modeOfPaymentService.list（）.subscribe(
res=>{
本款支付方式=res；
这是。_setFormValue（）；
}
);
}
private_setFormValue（）{
this.updateMoneyForm.setValue({
付款方式：this.amountGiven.mode\u of\u payment，
});
}

但这是给选择字段，如

单击“选择”字段时，会弹出选项，但即使在那里，默认情况下也不会选择所选字段，并且第一个选项始终有一个勾号

---

您不应使用所选的

指令，反应式表单将为您处理：

<select [formControl]="modeOfPayment">
    <option *ngFor="let mode of modeOfPayments"
    [ngValue]="mode.id">{{ mode.title }}</option>
</select>


{{mode.title}}

这里的问题是，选择新选项不会导致任何更改，即TS（类型脚本）属性

您需要在
select
标记上执行onchange操作

<select formControlName="mode_of_payment" type="text" id="input-mode-of-payment" 
 class="form-control" (change)="someFunction($event)">

    <option *ngFor="let mode of modeOfPayments" [(ngValue)]="mode.id" 
    [selected]="mode.id === amountGiven?.mode_of_payment">{{ mode.title }}</option>

</select>


{{mode.title}}

之后，您将需要实现该功能，例如更改默认的选定值。
我也尝试了删除
[选定]
，但它仍然显示为空白。检查您的示例是否显示为空：您是否可以共享您的浏览操作系统，问题似乎来自于此，而不是源于代码。您共享的图片是正确的，选择没有选择值，该值是默认值。你在期待什么？@AnujTBE我没有看到它在工作，我可以知道修复方法吗。即使是我也面临同样的问题。但是要显示在
\u setFormValue（）
函数中的表单中设置的默认选定值。它总是显示空白。