angular - 分组明智的动态单选按钮选择Angular 4
问题描述
我有一个 json 数组。通过迭代这个数组,我生成了复选框和单选输入的组合。但问题是在我移动到下一组时选择一组单选按钮后,前一组单选按钮被取消选择。
我正在提供代码片段:-
private modalArray = [
{
id:1,
name:'Bread Type',
choicetype:"single",
child:[
{
id:11,
name:"Roasted Bread",
value:"roasted",
default:"roasted"
},
{
id:12,
name:"Multi grain Bread",
value:"multigrain",
default:""
},
{
id:13,
name:"Bishakto Bread",
value:"bishakto",
default:""
}
]
},
{
id:3,
name:'Topins Type',
choicetype:"single",
child:[
{
id:31,
name:"Green Capcicum",
value:"green",
default:""
},
{
id:32,
name:"Yellow Capcicum",
value:"yellow",
default:""
}
]
}
];
在我看来组件: -
<div class="pop-mid">
<div class="pop-tab-block">
<div *ngFor="let modal of modalArray" class="pop-tab-item">
<h2 class="main-subheading-type2">{{ modal.name }}</h2>
<ul>
<li *ngFor="let choice of modal.child">
<span class="food-type ft-veg"></span>
<div *ngIf="modal.choicetype=='single'" class="rsnt-opt-chk">
<input
type="radio"
(change)="onChange(modal.id,choice.id, $event.target.checked,modal.choicetype)"
name="choices"
/>
<label>{{ choice.name }}</label>
</div>
</li>
</ul>
</div>
</div>
</div>
我该如何解决这个问题?提前致谢
解决方案
你可以试试这个:
<input type="radio" (change)="onChange(modal.id,choice.id, $event.target.checked,modal.choicetype )" name="{{'choices'+modal.id}}" />
在<li>
标签中
推荐阅读
- scala - 如何在Scala中生成将数组拆分为两个子数组的所有排列?
- python - EC2 实例中的 .py 文件以在来自 S3 存储桶的事件上执行
- python - 如何用python分隔文本文件中的字符
- python - 画布中分层图像的事件处理
- asp.net-core - preLaunchTask 未在启动配置中的 ${command:pickRemoteProcess} 之前执行
- c# - 数据透视表聚合的 Excel 性能
- javascript - 如何调用rest api并将结果提供给后续的promise调用
- c++ - C++ char Arrays 与数组进行比较并分配单个值;
- java - 将项目添加到收藏夹数据库时更改图标颜色
- javascript - 如何在这个 JavaScript 中放置一个循环?