角2 - グループ内のコンポーネントを選択する機能

Question

私はここで問題を解決する方法を知りました。申し込みページには、2つのボタンがあります。コンポーネントはそれぞれ<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); 
    } 
}