Angular中*ngIf使用问题：切换单选框后内容无法隐藏

我来帮你搞定这个*ngIf的问题！你现在遇到的核心问题是同一组单选框错误地绑定了多个ngModel变量，这导致切换选项时之前的变量值没有被重置，*ngIf的条件一直成立，所以内容就一直显示了。

问题根源分析 #

你看，同一name属性的单选框是一组，同一时间只能选中一个，但你给name="radio1"的三个单选框分别绑定了split2、split3、split4三个变量，给name="radio2"的两个单选框绑定了home1、gym1两个变量。比如：

• 当你选中“2”时，split2会被设为"two"，但切换到“3”时，split3变成"three"，但split2依然保留着"two"的值，没有被清空；
• 同理，选中“at home”后home1变成"home"，切换到“in the gym”时gym1变成"gym"，但home1还是"home"。

这就导致split2 && home1的条件永远为真，内容自然不会隐藏。

修复方案 #

正确的做法是同一组单选框绑定到同一个ngModel变量，这样切换选项时变量会自动更新为当前选中的值，之前的状态会被覆盖。

1. 组件中定义变量

在你的组件类里替换原来的多个变量，只保留两个对应两组单选框的变量：

// 替换原来的split2、split3、split4、home1、gym1
workoutSplit: string;
workoutLocation: string;
home = [ /* 你的原有home数据 */ ];

2. 修改模板中的单选框绑定

把同一组的单选框都绑定到对应的变量上：

<!-- 第一组：选择数量 -->
<label class="radio-inline">
  <input [(ngModel)]="workoutSplit" type="radio" name="radio1" value="two">2
</label>
<label class="radio-inline">
  <input [(ngModel)]="workoutSplit" type="radio" name="radio1" value="three">3
</label>
<label class="radio-inline">
  <input [(ngModel)]="workoutSplit" type="radio" name="radio1" value="four">4
</label>

<!-- 第二组：选择地点 -->
<label class="radio-inline">
  <input [(ngModel)]="workoutLocation" type="radio" name="radio2" value="home">at home
</label>
<label class="radio-inline">
  <input [(ngModel)]="workoutLocation" type="radio" name="radio2" value="gym">in the gym
</label>

3. 更新*ngIf的判断条件

现在可以精准判断选中的选项是否符合要求：

<tr>
  <th scope="row">1</th>
  <td *ngIf="workoutSplit === 'two' && workoutLocation === 'home'">{{home[0][0][1]}}</td>
  <td *ngIf="workoutSplit === 'two' && workoutLocation === 'home'">{{home[0][0][0]}}</td>
  <td *ngIf="workoutSplit === 'two' && workoutLocation === 'home'">{{home[0][1][0]}}</td>
</tr>

这样修改后，当你切换到“3”或者“in the gym”时，workoutSplit或workoutLocation的值会更新，workoutSplit === 'two' && workoutLocation === 'home'的条件就会不成立，内容也就自动隐藏了。

内容的提问来源于stack exchange，提问作者Sternisic