第二次单击后无法动态设置单选按钮值

Question

我有一个用于动态选中或取消选中单选按钮的按钮。问题是它工作一次，然后如果我决定手动单击同一组的单选按钮（当然是另一个），它会按预期更新。但是，当我尝试将其动态调整为之前的值（单击按钮）时，它不再应用该值。

这里是代码

html：

<input type="radio" id="one" class="" formControlName="group" value="one" [checked] = "radioGroup.first" >
<input type="radio" id="two" class="" formControlName="group" value="two" [checked] = "radioGroup.second" >
<input type="radio" id="three" class="" formControlName="group" value="three" [checked] = "radioGroup.third" >

.ts

onRadioDynamicChange() {
this.radioGroup = { first: true, second: null, third: null };
}

所以，它会在我第一次单击 onRadioDynamicChange 时发生变化，它会检查第一个单选按钮。然后我点击它的兄弟，然后再次点击 onRadioDynamicChange，它不再检查第一个 radioButton，没有任何动作发生。

编辑

这是行为：Stackblitz example

Answer 1

我也尝试了你所做的 Auqib 相反，这是我第一个解决问题的方法，但它仍然不能很好地工作，它发生了与操作相同的问题。第一次工作，下次不会更新。

我找到了解决方法，试试这个：

  <div class="container">
        <input type="radio" name="radio" (click)="radio = 'one'" id="one" class="" value="one" [checked]="radio == 'one'">
        <input type="radio" name="radio" id="two" (click)="radio ='two'" value="two" [checked]="radio == 'two'">
        <input type="radio" name="radio" id="three" (click)="radio ='three'" class="" value="three" [checked]="radio == 'three'">
        <button (click)=' onRadioDynamicChange()'>Click Me</button>
    </div>

ts：

  onRadioDynamicChange() {
        this.radio = "one";
  }

但我不知道为什么第一种方法没有按预期工作。如果有人知道原因，我会很高兴知道的。

Answer 2

如果你想使用任何类型的对象，就像你在 [https://stackblitz.com/edit/angular-srfwdq?file=src%2Fapp%2Fapp.component.html] 你应该使用示例 'radioGroup' 对象作为 radioGroup:any={} 这样您就可以向它添加属性，如果您不确定对象属性天气是否存在，则在 html 中使用 optional 'radioGroup?.first'、'radioGroup?.second' 和 'radioGroup?.third'

您应该像这样使用并确保一次只有一个对象“radioGroup”为真 在ts中。

  export class AppComponent {
    name = 'Angular';
    radioGroup:any={first:false,second:false,third:false};


    onRadioDynamicChange() {
      this.radioGroup.second =false;
      this.radioGroup.third=false;
      this.radioGroup.first =true;
    }

  }

在html中

<form >

<input type="radio" id="one" name="a"  value="one" 
[checked] = "radioGroup.first" >First
<input type="radio" id="two" name="a"  value="two" 
[checked] = "radioGroup.second" >Second
<input type="radio" id="three" name="a"  value="three" 
[checked] = "radioGroup.third" >Third


<button type="button" 
(click)="onRadioDynamicChange()">first</button>

  </form>

它肯定会起作用