Angular2-选择单选按钮的“显示/隐藏"部分 [英] Angular2 - Show/Hide section on selection of radio button

问题描述

我必须根据单选按钮的显示来显示或隐藏部分

I have to show or hide sections based on selection of radio button

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

如果用户单击是"，那么我们必须显示供应"并隐藏需求" 如果用户单击否"，那么我们必须显示需求"并隐藏供应".

If the user clicks on Yes then we have to show 'Supply' and hide 'Demand' If the user clicks on No then we have to show 'Demand' and hide 'Supply.

但是现在在加载表单本身时，供需双方都显示在屏幕上.

But now while loading the form itself both Supply and Demand is displaying on the screen.

推荐答案

在Angular中，可以使用* ngIf:

In Angular it can be achieved with *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

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

无需检查option==true或false，[checked]="options"和[checked]="!options"是否执行相同操作.

And no need to check if option==true or false, [checked]="options" and [checked]="!options" do the same.

这篇关于Angular2-选择单选按钮的“显示/隐藏"部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！