单选按钮打开 2 次点击

Question

有一个性别单选按钮，当我第一次选择男性时它工作正常，但我第二次点击男性时它跳转到女性。这也是反过来发生的。

这里是 HTML 代码：

<div class="row" *ngIf="employee.listingRule.includes('is_female')" >
    <label class="col-12 col-md-3 pb-2 col-form-label">sex:</label>
    <div class="col-12 col-md-9 pb-2">
       <div class="row">
          <div class="col-6">
            <fa-icon class="mr-2"
            [icon]="!employee.is_female ? icon.radioSelected : icon.radioBlank"
            (click)="setSex()"></fa-icon>
            <span (click)="setSex()">
              Man
             </span>
           </div>
           <div class="col-6">
             <fa-icon class="mr-2"
               [icon]="employee.is_female ? icon.radioSelected : icon.radioBlank"
               (click)="setSex()"></fa-icon>
               <span (click)="setSex()">
                 Women
               </span>
            </div>
        </div>
    </div>
</div>

这是一段代码，我使用的一个函数

  setSex() {
    this.employee.is_female = !this.employee.is_female;
  }

我怎样才能修复它，以便在第二次点击时它不会跳转到其他性别？

Answer 1

更好的选择是在方法中传递男性或女性并基于此激活（点击）="setGender('male')" 或（点击）="setGender('female')"

单选按钮打开 2 次点击

radio button switches on 2 clicks

radio-button

typescript

angular