Question

我需要知道是否选择了一个单选按钮来隐藏/显示其他选项。

if (condition1) {
    // ...
} else if (condition2) {
    // ...
} else { // only if condition3 is true when condition1 and condition2 are false
    // ...
}

div.subOption必须在选中后显示。这是对的？¿

Answer 1

我只是在组件中创建一个新的布尔变量，在选中单选按钮时将其设置为true。使用该布尔值，然后显示div。例如：

isChecked: boolean = false; // our new variable

<input type="radio" name="x" (click)="isChecked = true">

<div *ngIf="isChecked">
  <!-- Your code here -->
</div>

编辑：对于多个radiobuttons ......正如评论中所提到的，单选按钮在这一点似乎是Angular的一种错误。我发现处理单选按钮的最简单方法似乎是使用表单。因此，将单选按钮包装在一个表单中，如下所示：

  <form #radioForm="ngForm">
    <div *ngFor="let val of values">
      <input (change)="changeValue(radioForm.value)" type="radio" [value]="val.id" name="name" ngModel />{{val.name}}
    </div>
  </form>

而单选按钮在此示例中看起来如下所示：

{
  id: 1,
  name: 'value1'
}

在表单中有一个change事件，我们从中选取所选的单选按钮值。

(change)="changeValue(radioForm.value)"

然后我将使用布尔值和选择的值：

changeValue(val) {
  this.valueChosen = true; // shows div
  this.chosenVal = val.name; // here we have the value chosen
}

可以玩的傻瓜：here

选中单选按钮

1 个答案: