Angular ngModel 未在 ngFor 中设置单选按钮值

Question

我是 Angular 的新手，我的一个问题需要您的帮助。我有一个场景，我从 API 获取对象数组，例如

[{name: "abc", score: 2},{name: ""def, score: 3}]

这里的分数是从 0 到 3。我必须在 UI 上显示分数，如下图所示

第一个单选按钮用于得分 0，第二个单选按钮用于得分 1，直到最后，即得分 3

我的角码是

<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>

如果我运行代码，我只得到列表中的姓氏分数与分数一起检查，其余分数显示为空白。

P.S: 并用新的乐谱重新编辑乐谱。

谢谢。

Answer 1

很高兴您接受了答案；但要回答标题中的问题。

将value 设置为index，如：

<div *ngFor="let item of itemList; let i = index">

  <input type="radio" name="picker"
         [value]="i"
         [(ngModel)]="item.isPicked">

</div>

Answer 2

这是因为每个收音机的 ngModel 都是被选中的。 尝试将新变量绑定到 ngModel.. 试试这个：https://stackblitz.com/edit/angular-radio-button-api

Answer 3

为每个单选按钮设置不同的名称将解决问题。

<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>