我使用的角7和HTML。我现在面临一个问题,加载页面时检查默认的单选按钮。我能得到的价值,但加载页面时,可以不能够检查单选按钮。请任何人,指导我如何解决这个问题。
//我的TS文件
paymentModeStatus: string;
selectedValueForPaymentModeChange = 'cash';
paymentModeList: any = [];
public constructor() {}
ngOnInit() {
this.getPaymentModeList();
}
getPaymentModeList() {
this.paymentModeList = [{
'checked': true,
'name': 'Cash',
'value': 'cash',
},
{
'checked': false,
'name': 'Pay to Accounts',
'value': 'accounts',
}
];
}
//我的HTML文件
<div style="font-weight: bold">Payment Mode:</div>
<label
style="padding: 0 5px 0 20px"
*ngFor="let paymentMode of paymentModeList">
<input
type="radio"
name="paymentMode"
required="false"
[(ngModel)]="paymentModeStatus"
[value]="paymentMode.name"
(click)="paymentModeStatusAction(paymentMode.value)"
[checked]='paymentMode.checked'>
{{paymentMode.name}}
</label>
<pre>{{ paymentModeStatus }}</pre>
既然你已经指定[(ngModel)]="paymentModeStatus"
和[value]="paymentMode.name"
,你必须设置paymentModeStatus
为哪个支付模式要设置为默认的name
。
只需添加到您的ngOnInit
this.paymentModeStatus = this.paymentModeList[0].name;
以下是为您的参考一Working Sample StackBlitz。
这是因为经过属性不需要值
https://www.w3schools.com/tags/att_input_checked.asp
只要检查属性存在,该元素将被检查。
从上面的链接
<form action="/action_page.php">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="Submit">
</form>
编辑我已经修改了你的HTML [按钮-checkbox.html]以显示默认使用下面的代码进行核对
<style>
label {
padding: 0 5px 0 20px
}
</style>
<div><b>Payment Mode:</b></div>
<label *ngFor="let paymentMode of paymentModeList">
<input
type="radio"
name="paymentMode"
required="false"
[(ngModel)]="paymentModeStatus"
[checked]="paymentMode.checked == 'true'"
/>
{{paymentMode.name}} {{paymentMode.checked}}
</label>
<pre>{{ paymentModeStatus }}</pre>