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

问题描述

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

 <input name="options" [(ngModel)]="options" type="radio" [value]="true" [checked]="options==true"/>是的<输入名称="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="options==false"/>没有</标签>
<h2 ng-show="options == 'true'">供应</h2><h2 ng-show="options == 'false'">需求</h2></div>

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

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

解决方案

在 Angular 中可以使用 *ngIf:

 <input name="options" [(ngModel)]="options" type="radio" [value]="true" [checked]="options"/>是的<input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="!options"/>不<h2 *ngIf="options">供应</h2><h2 *ngIf="!options">需求</h2>

并且无需检查 option==true 或 false、[checked]="options" 和 [checked]="!options" 做同样的事情.

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.

解决方案

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>

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

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