angular - Angular select option field not displaying
问题描述
I'm using Angular 6
.
In the component.html file, I'm using FormGroup and the select field is like
<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>
The component.ts file contains
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,
});
}
But this is giving select fields like
When I click on the select field, the options are pop-up but even there the selected field is not selected by default and always the first option is having a tick mark.
解决方案
您不应该使用该selected
指令,反应形式会为您处理:
<select [formControl]="modeOfPayment">
<option *ngFor="let mode of modeOfPayments"
[ngValue]="mode.id">{{ mode.title }}</option>
</select>
推荐阅读
- php - 如何在 Laravel 中流式传输视频
- azure - 通过命令行或 Powershell 脚本从 Azure Devops 下载测试计划工件
- javascript - jQuery replaceWith() 不替换新值
- kubernetes - promethues operator alertmanager-main-0 挂起并显示
- c# - CefSharp:问题是触摸屏上的屏幕键盘停留在文本框上方并阻止条目被看到
- c# - C#从word文档中复制表格并将其添加到另一个word文档中
- java - 我想在我的flutter应用程序中使用我的java的Jar文件,有哪些可能的实现方式?
- html - 导航栏没有正确折叠和展开
- excel - VBA-Web 请求超时
- javascript - 数据表excel按钮不显示在页面上