Angular 2 - 在组中选择组件的功能

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

问题是，我需要创建一个逻辑来理解它们中的每一个被选中。请记住，我也有一个不想回答的按钮。我可以使用<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>

来源

2017-04-05 Caike Motta

你可以创建一个数组，并跟踪其中的选择：

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

来源

2017-04-05 17:17:51 Chrillewoodz

它的工作原理就像一个魅力！感谢@Chrillewoodz，我在上面的代码中改变了唯一的东西是添加一行来检查数组是否为空，因为它添加了两个选项。 'activate（gender：string）：void {this.genders.indexOf（gender）=== -1 && this.genders.length === 0）{this.genders.push（gender）; } else { this.genders.splice（this.genders.indexOf（gender），1）; } }' –

甜，如果有帮助，不要忘记接受答案。我会更新答案以包含您的修复程序。 – Chrillewoodz

Angular 2 - 在组中选择组件的功能

回答

相关问题