Angular2のチェックボックス要素でdivを表示および非表示にするにはどうすればよいですか？

Question

私はチェックボックスを持っています。達成しようとしているのは、チェックボックスがオンのときにdivを非表示にして、Angular 2.0ベータ版のチェックをはずしたときに表示することです。

は私が事前に 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> 

おかげでこのコード

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

コードで角度1.2でこれを行う方法を知っています。

Answer 1

基本的には、HTMLの表示と非表示には、[hidden]プロパティバインディングを使用する必要があります。

two way binding in Angular2 &の場合は[(ngModel)]を使用してください。(eventName)を使用すると、DOMにイベントがバインドされます。

チェックボックスは、チェックボックスのプロパティに基づいて(change)フックを適用することにより、確認されているかどうかをチェックすることができるマークアップ

<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> 

Answer 2

はdiv要素を非表示にしたり、表示するようにしようと、

ここでは同じのためにplnkrを働いています：

http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

.TSファイルコード：

checked(value){ 
    if(document.getElementById('abc').checked==true){ 
     this.shown= true 
    } 
    else if(document.getElementById('abc').checked==false) 
     this.shown= false; 
    } 

.htmlを

<input type='checkbox' id= 'abc' (change)="checked('abc')"> 

<div *ngIf='shown'> 
    Hello CheckBox 
</div> 

Answer 3

はあなたのチェックボックスのための[(ngModel)]を提供し、あなたのdivタグのため*ngIfを使用して同じngModelを使用しています。以下のコードサンプルを参照してください。

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

NB：またあなたの.TSファイルにモデルを宣言してください：

showhidepregnant: boolean; 

Answer 4

あなたはまた、#variableを使用することができます

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

次に、同じモードを使用しますからの構文。 チェック（register.checked）は、要素のチェックされた状態を返す入力要素のプロパティです。

注：ユーザーが/チェックした場合、イベント結合（チェック）は変更のチェックをトリガするために必要とされるには、チェックボックスをオフに：

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