如何在Angular2中显示和隐藏带有复选框元素的div？

Question

我有一个复选框,我想要实现的是隐藏div复选框的时间,并在Angular 2.0 beta中取消选中时显示.

我知道如何使用此代码在角度1.2中执行此操作

<label>
     <input type="checkbox" ng-model="showhidepregnant"/> Pregnant
</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

关于的代码 div

<div class="col-md-4 divhidetxtdpatient" ng-hide="showhidemasked">
      <input class="form-control" tabindex="1" id="id_field_specialist" ng-model="id_field_specialist" type="text" ng-blur="savespecialist()" placeholder="maskable"/>
</div>

提前致谢.

Answer 1

提供[(ngModel)]您的复选框,并使用相同的ngModel使用*ngIf你的div标签.请参阅以下代码示例.

<label>
   <input type="checkbox" [(ngModel)]="showhidepregnant"/> Pregnant
</label>

然后使用相同的模式:

<div class="col-md-4 divhidetxtdpatient" *ngIf="showhidepregnant">

注意:请在.ts文件中声明模型:

showhidepregnant: boolean;

Answer 2

您还可以使用Angular 中的#variable语法。check ( register.checked ) 是输入元素的属性，它返回元素的检查状态。

注意：如果用户选中/取消选中复选框，则需要事件绑定（选中）来触发更改检查：

<div *ngIf="register.checked">
  <h1>Hallo</h1>
</div>
<label><input (change)="register" #register type="checkbox"> Register</label>

Answer 3

基本上，您需要使用[hidden]属性绑定来显示和隐藏 HTML。

然后在 Angular2 中使用[(ngModel)]两种方式绑定并使用(eventName)将事件绑定到 DOM。

标记

<label>
   <input type="checkbox" [(ngModel)]="showhidepregnant"/> Pregnant
</label>

<div class="col-md-4 divhidetxtdpatient" [hidden]="showhidemasked">
   <input class="form-control" tabindex="1" id="id_field_specialist" 
   [(ngModel)]="id_field_specialist" type="text" 
   (blur)="savespecialist()" placeholder="maskable"/>
</div>