奇怪的角度行为在(点击)-需要添加'真实'如果设置了假值，则更新UI

Question

昨天在angular的单选按钮上被卡住了很长时间，也不是通常的"无法检查工作"内容

基本上，如果我在(点击(函数中将变量设置为false，UI不会更新，但变量会更新(下面的示例angular html代码带有链接-尝试点击第一个组到yup，然后不…(

在第二组中，我必须添加一个"true；"到(点击(语句以更新UI，即显示正确的单选按钮选择

第三组使用vanilla-type/javascript onclick函数。变量不会更新(我不希望它更新(，但UI使用与原始组相同的"variable=false"语句。

这是我应该知道的有棱角的皱纹还是虫子？

<p>Group 1, value = {{isYes}}</p>
<label>Nope<input type="radio" name="group1" id="nope" (click)="isYes = false;" checked></label>
<label>Yup<input type="radio" name="group1" id="yup" (click)="isYes = true;"></label>
<p>Group 2, value = {{isYes2}}</p>
<label>Nope<input type="radio" name="group2" id="nope2" (click)="isYes2 = false; true;" checked></label>
<label>Yup<input type="radio" name="group2" id="yup2" (click)="isYes2 = true;"></label>
<p>Group 3, value = {{isYes3}}</p>
<label>Nope<input type="radio" name="group3" id="nope3" onclick="this.isYes3 = false;" checked></label>
<label>Yup<input type="radio" name="group3" id="yup3" onclick="this.isYes3 = true;"></label>

https://stackblitz.com/edit/angular-ivy-lrte3r?file=src/app/app.component.html

Windows 10 Pro，Chrome 91(但在Firefox中也是如此(

---

编辑：这仍然可以正确地更新UI，即使对于nope 返回false

<p>Group 3, value = {{isYes3}}</p>
<label>Nope<input type="radio" name="group3" id="nope3" onclick="return false;" checked></label>
<label>Yup<input type="radio" name="group3" id="yup3" onclick="return true;"></label>

Answer 1

这不是有角度的褶皱。在第1组中，事件出现气泡，阻止其再次更改。在第2组中，true会停止它。理想情况下，您会使用JSEvent#stopPropagation()。

<p>Group 1, value = {{isYes}}</p>
<label>Nope<input type="radio" name="group1" id="nope" (click)="isYes = false; $event.stopPropagation();" checked></label>
<label>Yup<input type="radio" name="group1" id="yup"  (click)="isYes = true;"></label>

具有vanalla JSonclick的组3未被识别在Angular中使用时无法访问控制器变量(如isYes3 = true(，因此它们不会产生任何影响。

我修改了斯塔克布利茨。

---

也就是说，Angular中有更优雅、更高级的方式用于表单控制，您不必手动分配变量。查看Angular表单概述。