角度 2 - 选择组中组件的功能

Question

我想知道如何解决我在这里遇到的问题。在注册页面中，我有两个按钮，它们是组件<btn-gender>每个按钮都显示要选择的性别。

问题是，我需要创建一个逻辑来理解它们中的每一个都被选中了。请记住，我也为那些不想回答它的人提供了一个按钮。我可以使用<ion-select>轻松解决它，但我真的需要使用按钮，因为它在我遵循的布局中是预期的。

你们对我如何解决它有什么建议吗？谢谢

.HTML：

<ion-grid>
    <ion-row>
      <ion-col>
        <h4 text-center>Are you:</h4>
      </ion-col>
    </ion-row>
    <ion-row >
      <ion-col>
        <btn-gender [text]="textMale" [imageURL]="imageMale" [(ngModel)]="male"></btn-gender>
      </ion-col>
      <ion-col>
        <btn-gender [text]="textFemale" [imageURL]="imageFemale" [(ngModel)]="female"></btn-gender>
      </ion-col>
    </ion-row>
    <ion-row>
      <button ion-button block>I prefer not to answer this</button>
    </ion-row>
    <ion-row>
      <button ion-button block [disabled]="!isValid()" (click)="next()">Continue</button>
    </ion-row>
  </ion-grid>

Answer 1

您可以创建一个数组并跟踪选择了哪些数组：

<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);
  }
}