使用带有角度参考变量的复选框的值显示 div答案

【问题标题】：Showing a div using the value of a checkbox with reference variable in angular使用带有角度参考变量的复选框的值显示 div
【发布时间】：2018-03-01 22:15:47
【问题描述】：

我正在尝试使用复选框来切换 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>

【问题讨论】：

标签： angular checkbox

【解决方案1】：

将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

【讨论】：

感谢您的回答。我想知道为什么在这种情况下我们需要 ngModel 并且仅使用 #changePasswordSwitch 无法访问它？
@Vega，不使用“值”，使用“检查”
@Eliseo，是的，我就是这么做的
好吧（我今天心情不好），即使你写了一些像 (change)="null" type="checkbox">