Question

我有一个带有Bootstrap 4的单选按钮，它运行良好，比我放一个时更少，它不会保持检查状态：

我在Angular 4的应用程序中有它，我不知道是否必须使用属性或我应该使用的语法，具体而言。

有人可以帮助我，我错过了检查按钮

刚启动屏幕都未选中。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" [value]="HOY" [(ngModel)]="sinImputarValue" (click)="sinImputarHoy();"> SIN IMPUTAR HOY
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" [value]="SEMANA" [(ngModel)]="sinImputarValue" (click)="sinImputarSemana();"> SIN IMPUTAR ESTA SEMANA
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" [value]="MES" [(ngModel)]="sinImputarValue" (click)="sinImputarMes();"> SIN IMPUTAR ESTE MES
  </label>
</div>


  sinImputarHoy(){
  console.debug("sinImputarHoy");
  this.limpiarFiltroManual();
  this.sinImputarValue = 'HOY';
}

sinImputarSemana(){
  console.debug("sinImputarSemana");
  this.limpiarFiltroManual();
  this.sinImputarValue = 'SEMANA';
}

sinImputarMes(){
  console.debug("sinImputarMes");
  this.limpiarFiltroManual();
  this.sinImputarValue = 'MES';
}

Answer 1

请使用以下代码

<label>This rule is true if:</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="true" [(ngModel)]="rule.mode">
</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="false" [(ngModel)]="rule.mode">
</label>

Angular 4 default radioButton Checked by Default

Answer 2

在typecriot文件中的

最初分配一个vlaue，您希望在开始时对其进行检查。

<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" value="HOY" 
[(ngModel)]="sinImputarValue"> SIN IMPUTAR HOY
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" value="SEMANA" 
[(ngModel)]="sinImputarValue"> SIN IMPUTAR ESTA SEMANA
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" value="MES" 
[(ngModel)]="sinImputarValue"> SIN IMPUTAR ESTE MES
</label>
</div>

在您的.ts文件中

sinImputarValue : string = 'HOY';

不需要sinImputarMes()函数。

Radio Button Bootstrap 4和Angular 4

2 个答案: