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

Question

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

我知道如何使用此代码在 angular 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;