第二次单击后无法动态设置单选按钮值
Cannot set radio button value dynamically after second click
我有一个用于动态选中或取消选中单选按钮的按钮。问题是它工作一次,然后如果我决定手动单击同一组(当然是另一个)的单选按钮,它会按预期更新。但是,当我随后尝试将其动态调整为之前的值(通过单击按钮)时,它不再应用该值。
这是代码
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
如果您想使用您在
[https://stackblitz.com/edit/angular-srfwdq?file=src%2Fapp%2Fapp.component.html] 你应该使用示例 'radioGroup' 对象作为 radioGroup:any={}
这样你就可以向它添加 属性 并且在 html 中使用可选的,如果你不确定对象 属性 天气它是否存在
'radioGroup?.first', 'radioGroup?.second' and '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>
肯定有用
我也尝试了你所做的 Auqib 相反,这是我对问题的第一个解决方案,但它仍然没有很好地工作,它发生了与 op 相同的问题。第一次工作,下次不会更新。
我找到了解决方法,试试这个:
<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";
}
但我不知道为什么第一个方法没有按预期工作。如果有人知道原因,我会很高兴知道。
我有一个用于动态选中或取消选中单选按钮的按钮。问题是它工作一次,然后如果我决定手动单击同一组(当然是另一个)的单选按钮,它会按预期更新。但是,当我随后尝试将其动态调整为之前的值(通过单击按钮)时,它不再应用该值。
这是代码
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
如果您想使用您在 [https://stackblitz.com/edit/angular-srfwdq?file=src%2Fapp%2Fapp.component.html] 你应该使用示例 'radioGroup' 对象作为 radioGroup:any={} 这样你就可以向它添加 属性 并且在 html 中使用可选的,如果你不确定对象 属性 天气它是否存在 'radioGroup?.first', 'radioGroup?.second' and '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>
肯定有用
我也尝试了你所做的 Auqib 相反,这是我对问题的第一个解决方案,但它仍然没有很好地工作,它发生了与 op 相同的问题。第一次工作,下次不会更新。
我找到了解决方法,试试这个:
<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";
}
但我不知道为什么第一个方法没有按预期工作。如果有人知道原因,我会很高兴知道。