Angular2 - 单选按钮的选择显示/隐藏部分

问题描述：

<input name="options" [(ngModel)]="options" type="radio" [value]="true" [checked]="options==true"/> Yes 

    <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="options==false"/> No</label> 

<div> 
     <h2 ng-show="options == 'true'">Supply</h2> 
     <h2 ng-show="options == 'false'">Demand</h2> 
</div>

的选择显示或隐藏部分如果是用户点击那么我们必须表现出“供给”和隐藏'Demand' 如果用户点击No，那么我们必须显示'Demand'并隐藏'Supply'。

但是，现在在加载表单本身时，Supply and Demand显示在屏幕上。

角2没有'NG秀'指令，请使用'* ngIf'代替 – Nehal

或按需使用[hidden] =“！options”on demand/[hidden] =“options” – JGFMK

谢谢。有用 – Jan69

答

在角可与* ngIf来实现：

<input name="options" [(ngModel)]="options" type="radio" [value]="true" [checked]="options"/> Yes 

<input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="!options"/> No</label> 

<h2 *ngIf="options">Supply</h2> 
<h2 *ngIf="!options">Demand</h2>

而且不需要检查是否option==true或false，[checked]="options"和[checked]="!options"这样做。

答

<div> 
      <div class="radio"> 
       <label><input type="radio" [(ngModel)]="prop" name="prop" value="A">A</label> 
      </div> 
      <div class="radio"> 
       <label><input type="radio" [(ngModel)]="prop" name="prop" value="B">B</label> 
      </div> 
      <div class="radio"> 
       <label><input type="radio" [(ngModel)]="prop" name="prop" value="C">C</label> 
      </div> 
    </div> 

<div *ngIf="prop === 'A'">A</div> 
<div *ngIf="prop === 'B'">B</div> 
<div *ngIf="prop === 'C'">C</div>

如果要预选值类型，然后键入

prop = 'A';

在你的.ts文件

Angular2 - 单选按钮的选择显示/隐藏部分

相关推荐