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

我有一个复选框,我想要实现的是在选中复选框时隐藏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>

提前致谢.

解决方法

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

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

然后使用相同的模式：

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

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

showhidepregnant: boolean;