переключатель включает 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')"