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

Question

我想以编程方式选择性别单选按钮。我正在使用 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 函数将在 View 中按下编辑按钮时执行。

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

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 哲学