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

Question

我想以编程方式选择性别单选按钮。我正在使用角度 7。这是我的代码： (html)

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

我尝试使用@ViewChild，但没有得到任何选定的属性来操作。

(ts)

@ViewChild('male') male_btn: ElementRef;
@ViewChild('female') female_btn: ElementRef;
setGender(g: any) {
    this.gender = g;
  }
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;
    }

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

  }

这里editPerson函数会在视图中按下编辑按钮时执行。

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

Answer 1

像这样使用 [(ngModel)]="myRadio"

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

并在您的 ts 文件中定义 myRadio，例如 myRadio:string;

因此 你可以像

一样使用这个值

editPerson() {

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

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

  }

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

并且，不要使用 javascript 来控制 Angular 中的 DOM 元素，这违反了 Angular 哲学

Answer 2

我们可以通过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 3

     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

Answer 4

我建议使用 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);
}

希望这有帮助...