Question

我正在建立一个网站，并且试图在使用单选按钮之前将其选中。因此，我正在使用一个视图子级将我的单选按钮设置为选中状态。它可以工作，但是之后我无法更改按钮的状态。

我单击它，但是什么也没发生。

我该怎么办？

编辑：我的坏，我需要使用复选框。我都糊涂了

@ViewChild('right1') right1: ElementRef

EditRights(){
    this.right1.nativeElement.checked = true
}

Answer 1

尝试使用<?xml version="1.0" encoding="utf-8" ?> <configuration> <system.web> <compilation targetFramework="4.8" /> </system.web> </configuration>的属性绑定checked属性

HTML：

radio button

TS（app.component.ts）

<input type=checkbox name=gender [checked]=checkFlag>Male
<br>
<input name=gender type=checkbox [checked]=checkFlag>Female

<br/>
<button (click)="unCheckFunc()">Toggle Checkbox</button>

stackblitz demo

Answer 2

尝试使用ngModel，这样您将创建两种方式的数据绑定，这意味着当属性（stateValue）更新时，这将反映输入控件，反之亦然

模板

<label>
  On : <input name="state" type="radio" [(ngModel)]="stateValue" [value]="true"/>
</label>
<label >
  Off: <input name="state" type="radio" [(ngModel)]="stateValue" [value]="false"/> 
</label>

componenet

public stateValue = true;

demo ??

已更新⚡⚡

如果要使用复选框，则只需创建一个属性并使用ngModel这样

<label>
is working <input type="checkbox" [(ngModel)]="isWorking">
</label>

<label>
has a car <input type="checkbox" [(ngModel)]="hasCar">
</label>

您无需创建属性的复选框复选框输入

如果您要绑定多个复选框或创建一个动态复选框，请选中此示例

  public options = new Array(10); // number of checkbox  elements 
  public optionsValue = {}; // checkbox values

模板

<label class="option-control" *ngFor="let o of options;let index = index">
  option {{indx}} <input type="checkbox" [(ngModel)]="optionsValue[index]" >
</label>

<button (click)="optionsValue = {}">Rest ? </button>

demo ??

通过代码进行设置后，我无法再编辑单选按钮

2 个答案: