角2+を使用してラジオボタンをチェックしたときに要素を非表示にする方法は？

Question

私は現在、clickとngIf*を使用していますが、ダブルクリックすると変更が行われます。また、現在選択されているオプションをダブルクリックすると、ビューが変更され、そのようなことは起こりたくありません。どのようにこれを正しく行うことができますか？

 <fieldset class="form-group col-md-3"> 
    <div class="form-check"> 
     <label class="form-check-label"> 
     <input (click)="computation = !computation" type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
      Enable View 
     </label> 
    </div> 
    <div class="form-check"> 
    <label class="form-check-label"> 
     <input (click)="computation = !computation" type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> 
      Disable View 
     </label> 
    </div> 
    </fieldset> 
    <div *ngIf="computation" class="form-group col-md-3"> 
    <label for="app_id_org_input">Enabled</label> 
    <input type="text" class="form-control" id="app_id_org_input" placeholder="Enabled"> 
    </div> 
    <div *ngIf="!computation" class="form-group col-md-3"> 
    <label for="app_id_input">Disabled</label> 
    <input type="text" class="form-control" id="app_id_input" placeholder="Disabled"> 
    </div> 

Answer 1

これを達成するための別の方法があります。 ngModelを使用して、Angular2が変数値を変更できるようにすることができます。ここに私のために働くコードがあります。あなたのクラスで 、テンプレートで

// set your variable 
private computation = true; 

、

<fieldset class="form-group col-md-3"> 
    <div class="form-check"> 
     <label class="form-check-label"> 
     <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" [value]="true" checked [(ngModel)]="computation"> 
      Enable View 
     </label> 
    </div> 
    <div class="form-check"> 
    <label class="form-check-label"> 
     <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" [value]="false" [(ngModel)]="computation"> 
      Disable View 
     </label> 
    </div> 
    </fieldset> 
    <div *ngIf="computation" class="form-group col-md-3"> 
    <label for="app_id_org_input">Enabled</label> 
    <input type="text" class="form-control" id="app_id_org_input" placeholder="Enabled"> 
    </div> 
    <div *ngIf="!computation" class="form-group col-md-3"> 
    <label for="app_id_input">Disabled</label> 
    <input type="text" class="form-control" id="app_id_input" placeholder="Disabled"> 
    </div>