Question

我想以编程方式选择性别单选按钮。我正在使用angular7。这是我的代码：（html）

studentid

我尝试使用@ViewChild，但没有选择任何要操纵的属性。

（ts）

top 10 percent

在视图中按下编辑按钮时，将执行editPerson功能。

我想要的是当person.gender值是male时，将选择视图中的male按钮，并相应地选择female。

Answer 1

为此使用[（ngModel）] =“ myRadio”

editPerson() {

   if (myRadio === 'Male') {
      //this.male_btn.nativeElement;
    }

    if (myRadio === 'Female') {
      //this.female_btn.nativeElement;
    }

  }

，然后在ts文件中定义myRadio，例如myRadio：string;

，因此您可以使用

这样的值

{{1}}

或在单选更改事件上调用editPerson以获取单选按钮的事件和值

而且，不要使用javascript在Angular中控制DOM元素，这违反了angular的哲学。

Answer 2

我建议您使用Jquery（如果您熟悉的话）。

按如下所示修改HTML，

 <input #male type="radio" name="gender" (click)="setGender('Male')" id="male"> Male
 <input #female type="radio" name="gender" (click)="setGender('Female')" id="female"> Female

然后

editPerson(person) {
console.log(person.name);
this.name_field.nativeElement.value = person.name;
this.salary_field.nativeElement.value = person.salary;

if (person.gender === 'Male') {
  //this.male_btn.nativeElement;
  $("#male").prop("checked", true);

}

if (person.gender === 'Female') {
  //this.female_btn.nativeElement;
  $("#female").prop("checked", true);
}

希望这对您有帮助...

Answer 3

我们可以以Angular的方式执行此操作，而无需jQuery来执行此操作。将ngModel和value添加到您的input标签

<input #male type="radio" id="gender" [value]="'Male'" name="gender" [(ngModel)]="personGender" (click)="setGender('Male')"> Male
<input #female type="radio" id="gender" [value]="'Female'" name="gender" [(ngModel)]="personGender" (click)="setGender('Female')"> Female

有关更多信息，请查看here有关ngModel

将此方法添加到您的组件中

personGender :string;
setGender(person) { 
    if (person == 'Male') {
      this.personGender = 'Male';   
    }
    if (person == 'Female') {
      this.personGender = 'Female';   
    }
  }

Answer 4

     You have to use two binding [ngModel] like this :


    <input type="radio" value="male" name="gender" [ngModel]="person.gender" > Male
     <input type="radio" value="female" name="gender" [ngModel]="person.gender" > Female

    Hope this works for you.
you can refer below link as well:
https://www.concretepage.com/angular-2/angular-2-radio-button-and-checkbox-example

如何使用角度从组件到模板选择选项按钮？

4 个答案: