在按钮上单击检查在 angular 4 中选择了哪个单选按钮

Question

我有两个单选按钮和一个按钮，在选择要隐藏的单选按钮时，在 angular 中显示 div 4. 这是我的代码 My Code。选择单选按钮后单击按钮显示隐藏 div。请帮忙。

<div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label border rounded px-5 py-2 mt-3 shadow-sm w-100" for="customRadio1">
  <span class="font-weight-bold">Radio Button 1</span>
  </label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label border rounded px-5 py-2 mt-3 shadow-sm w-100" for="customRadio2">
  <span class="font-weight-bold">Radio Button 2</span>
</label>
</div>

<button>Show Content</button>
</div>


<div style="display:none;">
Radio Button 1 Content
</div>
<div style="display:none;">
Radio Button 2 Content
</div>

Answer 1

您可以为此使用 [(ngModel)]。

我已经在 Stackblitz

上创建了一个演示

<div *ngIf="showcontent=='radio1'">
Radio Button 1 Content
</div>
<div *ngIf="showcontent=='radio2'">
Radio Button 2 Content
</div>

在按钮上单击检查在 angular 4 中选择了哪个单选按钮

On button click check which radio button selected in angular 4

html

angular

radio-button

angular5

angular4-forms