时间戳

首页 > 解决方案 > 如何使用角度从组件到模板选择选项按钮？

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

问题描述

我想以编程方式选择性别单选按钮。我正在使用 Angular 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 值为男性时，将选择视图中的男性按钮并相应地选择女性。

标签： angulartypescript

解决方案

像这样使用 [(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 哲学

推荐阅读