Javascript 角度2-用于在组中选择组件的函数

我想知道如何解决我现在遇到的问题。在注册页面中，我有两个按钮，它们是组件

，其中每个按钮都显示要选择的性别

问题是，我需要创建一个逻辑来理解它们中的每一个被选中。记住，我还有一个按钮给那些不想回答的人。我可以很容易地用

解决它，但我真的需要使用按钮，正如我下面的布局所期望的那样

你们对我如何解决这个问题有什么建议吗？谢谢

HTML:

你是吗：
我不想回答这个问题
继续

您可以创建一个数组并跟踪所选的数组：

<ion-row >
  <ion-col>
    <btn-gender [text]="textMale" [imageURL]="imageMale" [(ngModel)]="genders" (click)="activate('male')"></btn-gender>
  </ion-col>
  <ion-col>
    <btn-gender [text]="textFemale" [imageURL]="imageFemale" [(ngModel)]="genders" (click)="activate('female')"></btn-gender>
  </ion-col>
</ion-row>

activate(gender: string): void {

  // Second condition included as per OP's own solution
  if (this.genders.indexOf(gender) === -1 && !this.genders.length) {
    this.genders.push(gender);
  }
  else {
    this.genders.splice(this.genders.indexOf(gender), 1);
  }
}

激活（性别：字符串）：无效{
//根据OP自己的解决方案包括第二个条件
if（this.genders.indexOf（gender）==-1&&！this.genders.length）{
这个。性别。推（性别）；
}
否则{
this.genders.splice（this.genders.indexOf（gender），1）；
}
}

它就像一个符咒！！！感谢@Chrillewoodz，我在上面的代码中唯一更改的是添加一行来检查数组是否为空，因为它添加了两个选项

activate（genders:string）：void{if（this.genders.indexOf（gender）=-1&&this.genders.length==0{this.genders.push（gender）；}否则{this.genders.splice（this.genders.indexOf（gender），1）；}

Sweet，如果答案有用，别忘了接受。我将更新答案以包含您的修复。

<ion-row >
  <ion-col>
    <btn-gender [text]="textMale" [imageURL]="imageMale" [(ngModel)]="genders" (click)="activate('male')"></btn-gender>
  </ion-col>
  <ion-col>
    <btn-gender [text]="textFemale" [imageURL]="imageFemale" [(ngModel)]="genders" (click)="activate('female')"></btn-gender>
  </ion-col>
</ion-row>

activate(gender: string): void {

  // Second condition included as per OP's own solution
  if (this.genders.indexOf(gender) === -1 && !this.genders.length) {
    this.genders.push(gender);
  }
  else {
    this.genders.splice(this.genders.indexOf(gender), 1);
  }
}