使用带有角度的引用变量的复选框的值显示div

Posted 2021-05-06

我正在尝试使用复选框切换div的可见性。我试图使用引用变量来做这个，但无法弄清楚如何做到这一点。我正在尝试做类似下面的事情。我无法获得复选框值。

<input #changePasswordSwitch class="switch-input"  name="changePassword" id="changePassword" type="checkbox" >

<div class="form-group row" *ngIf="changePasswordSwitch.value">
   Show Some Data Here 
</div>

答案

在输入上设置ngModel并为changePasswordSwitch.checked更改：

<input #changePasswordSwitch [ngModel]="changePasswordSwitchModel" class="switch-input" name="changePassword" id="changePassword"
 type="checkbox">
<div class="form-group row" *ngIf="changePasswordSwitch.checked">
    Show Some Data Here
</div>

或删除模板变量，只使用双向绑定ngModel：

<input [(ngModel)]="changePasswordSwitchModel" class="switch-input" name="changePassword" id="changePassword" type="checkbox">
<div class="form-group row" *ngIf="changePasswordSwitchModel">
    Show Some Data Here
</div>

DEMO