时间戳

首页 > 解决方案 > 在Angular的单选按钮组列表中默认检查单选按钮？

html - 在Angular的单选按钮组列表中默认检查单选按钮？

问题描述

我正在使用 Angular 7 和 HTML。我在加载页面时遇到了检查默认单选按钮的问题。我能够获得价值，但在加载页面时无法检查单选按钮。请任何人指导我如何解决这个问题。

StackBlitz 链接

// 我的 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>

标签： htmlangularngforradiobuttonlist

解决方案

由于您已指定[(ngModel)]="paymentModeStatus"和[value]="paymentMode.name"，因此您必须将 设置paymentModeStatus为name您要设置为默认的任何付款模式的 。

只需将此添加到您的ngOnInit

this.paymentModeStatus = this.paymentModeList[0].name;

这是您参考的工作示例 StackBlitz。

推荐阅读