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

Question

I am new on angular, need your assistance in one of my problem. I have a scenario where I am getting array of objects from API like

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

here score is from 0 to 3. And I have to show the score on UI like below image

first radio button is for score 0 and second for score 1 till last ie score 3

and my angular code is

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

If I run the code, I am getting only last name score in list is checked with the score and rest of the above scores show blank.

PS: And make edit score again with the new scores.

Thanks.

Answer 1

Having different name for each radio button will solve the problem.

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

Answer 2

This is because ngModel for each radio will be the one which is selected. Try to bind new variable to ngModel.. Try this: https://stackblitz.com/edit/angular-radio-button-api

Answer 3

Good that you accepted answer; but to answer the question in title.

Set value to index , like:

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

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

</div>