angular - 在 Ionic 3 中动态选择单选按钮
问题描述
我有一些代码可以根据表达式动态选择单选按钮,但问题是它有时会选择单选组列表的两个单选按钮,即 html 的代码
<ion-row>
<ion-col col-4 no-padding class="one">
<ion-item>
<ion-label>
<img src="assets/imgs/nearby/male.png"> Male</ion-label>
<ion-radio [checked]="this.gender === 'Male'" value="Male" (ionSelect)="selectGender('Male')"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-5 no-padding class="two">
<ion-item>
<ion-label>
<img src="assets/imgs/nearby/female.png"> Female</ion-label>
<ion-radio [checked]="this.gender === 'Female'" value="Female" (ionSelect)="selectGender('Female')"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-3 no-padding class="third">
<ion-item>
<ion-label>
<img src="assets/imgs/nearby/all-mf.png"> All</ion-label>
<ion-radio [checked]="this.gender === 'all'" value="all" (ionSelect)="selectGender('all')"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
中的 selectGender 方法是
selectGender(gender) {
this.gender = '';
this.gender = gender;
}
有没有更好的方法来实现这一目标?广播组所属的搜索字段和搜索结果都是同一页面的一部分,并且在 onSearchClicked() 上被隐藏和查看,onSearchClicked() 是一种更改控制查看和不查看元素的变量的方法。
我希望与 .ts 文件中的性别变量值同步选择单选按钮。
解决方案
我后来找到了一个解决方案,绑定到隐藏属性解决了它,因为 *ngIf 每次都会删除并向 DOM 添加元素。我应该在问题中提到这一点,但使用属性绑定而不是 *ngIf。
推荐阅读
- reactjs - 如何测试事件的函数调用?
- php - 如何使用 PHP 从 Google 开发工具访问“表单数据”
- flutter - Flutter https异常CERTIFICATE_VERIFY_FAILED:证书扩展无效或不一致(handshake.cc:359))
- vue.js - 如何以编程方式绑定 Nuxt/Vue 中的视频播放器 URL?
- database - 当数据库表进行垂直分区时,分区表和分区前的表是什么关系?
- c++ - 如何在 _popen 中运行多个命令
- python - 如何让我的服务器告诉客户端关闭连接?
- node.js - 如何用不同的包完全覆盖嵌套的 npm 子依赖项(不仅仅是不同的包版本号)?
- python - 如何在python中将\ 1字符转换为字符串
- postgresql - 根据时间戳范围展开(重复)记录(PostgreSQL)