javascript - 模板驱动表单中的单选按钮
问题描述
每次页面加载最后一个单选按钮时都会被选中。我知道它与 Id 有关,但我不知道如何解决它。
国家数组
countryA = [{name : "Finland"}, {name : "china"},{name : "USA"}]
测试.html
<form #filterForm="ngForm" (ngSubmit)="addFilter(filterForm)" autocomplete="off">
<div class="row">
<div class="col-12" style="border: 1px solid red">
<div *ngFor="let x of country">
<label for="{{x.name}}"> {{x.name}} </label>
<input type="radio" id="{{x.name}}" value="{{x.name}}" name="countries" [(ngModel)]='x.name' >
</div>
</div>
<!-- <div class="col-12" style="border: 1px solid red">b</div>
<div class="col-12" style="border: 1px solid red">c</div>
<div class="col-12" style="border: 1px solid red">D</div> -->
</div>
</form>
hh : {{filterForm.value | json}}
解决方案
您应该向每个国家/地区添加一个选定的属性,以用作单选按钮值的 ngModel:
在构造函数中:
this.country = this.country.map(item =>({ name: item.name , selected : false }));
在 html 中:
<div class="col-12" style="border: 1px solid red">
<div *ngFor="let x of country; index as i">
<label for="{{x.name}}"> {{x.name}} </label>
<input type="radio" id="{{x.name}}" value="{{x.name}}" name="countries" [(ngModel)]="country[i].selected">
</div>
</div>
检查演示。
推荐阅读
- java - 用于以编程方式关联或启用 Jira 项目中的子组件的 REST API
- c# - C# Windows 窗体 ToolStrip 和 MenuStrip 内存泄漏
- kubernetes - Kubernetes 托管 Auto Scaling 组如何启用指标收集
- git - 如何将源(本地)存储库中的更新(最后几次提交)与使用 git subtree 创建的子目录合并?
- linux - 比较来自多个文件的列值
- python - Python中带有AND条件的LOC搜索字符串
- node.js - 无法读取未定义的属性“forEach”,nodeJS mongoose ejs
- node.js - SAP Business One -> 嵌入式事件的 Rest API
- maven - 无法在项目 SydApp 上执行目标 org.openjfx:javafx-maven-plugin:0.0.6:run (default-cli):错误
- swift - ARKit 对象 2D x, y 位置