Angular select 选项字段未显示

Question

我正在使用 Angular 6。

在 component.html 文件中，我使用 FormGroup 并且 select 字段类似于

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

component.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,
  });
}

但这是给 select 个字段，例如

当我点击 select 字段时，选项会弹出，但即使在那里 selected 字段默认情况下也不会 selected 并且始终是第一个选项有一个刻度线。

Answer 1

你不应该使用 selected 指令，反应式形式会为你处理：

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

Here is a link to a running code.

Answer 2

这里的问题是选择一个新的选项不会引起任何变化，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>

之后您将需要实现该功能，例如更改默认选择值。

Answer 3

很可能它来自您的 css。删除 select 字段上的表单控件 class，它将显示。您可以为 select 字段编写自定义 css。

Angular select 选项字段未显示

Angular select option field not displaying

angular

angular6

angular-reactive-forms

angular-forms