Angular ngModel未在ngFor内设置单选按钮值
Angular ngModel未在ngFor内设置单选按钮值
提问于 2020-07-18 22:42:01
我是一个新手，在我的一个问题上需要你的帮助。我有一个从API获取对象数组的场景，如下所示
[{name: "abc", score: 2},{name: ""def, score: 3}]这里的分数是从0到3。我必须在UI上显示分数，如下图所示
第一个单选按钮表示分数0，第二个单选按钮表示分数1，最后一个单选按钮表示分数3
我的angular代码是
<div *ngFor="let mark of marks; let ind = index">
{{mark.name}}
<input type="radio" [value]="0" name="score" id="zero"
[(ngModel)]="mark.score">
<input type="radio" [value]="1" name="score" id="one"
[(ngModel)]="mark.score">
<input type="radio" [value]="2" name="score" id="two"
[(ngModel)]="mark.score">
<input type="radio" [value]="3" name="score" id="three"
[(ngModel)]="mark.score">
</div>如果我运行代码，我只得到列表中的姓氏分数，上面的分数显示为空。
附言:用新的分数重新编辑分数。
谢谢。
回答 3
Stack Overflow用户
发布于 2020-07-18 23:38:09
为每个单选按钮指定不同的名称可以解决这个问题。
<div *ngFor="let mark of marks; let i = index">
{{mark.name}}
<input type="radio" value="0" id="zero" [name]="marks[i].name + i" [(ngModel)]="marks[i].score">
<input type="radio" value="1" id="one" [name]="marks[i].name + i" [(ngModel)]="marks[i].score">
<input type="radio" value="2" id="two" [name]="marks[i].name + i" [(ngModel)]="marks[i].score">
<input type="radio" value="3" id="three" [name]="marks[i].name + i" [(ngModel)]="marks[i].score">
</div>Stack Overflow用户
发布于 2020-07-19 19:08:17
这是因为每个无线电的ngModel将是被选择的那个。尝试将新变量绑定到ngModel..试试这个：https://stackblitz.com/edit/angular-radio-button-api
Stack Overflow用户
发布于 2021-11-11 05:30:13
很好，你接受了答案；但要在标题中回答问题。
将value设置为index，如：
<div *ngFor="let item of itemList; let i = index">
<input type="radio" name="picker"
[value]="i"
[(ngModel)]="item.isPicked">
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62969845
复制相关文章
相似问题
腾讯云开发者
