Angular 单选按钮使用 ngFor 显示错误数据

Question

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

[
    {class: "X", subject: [{name: "abc", score: 1},{name: "def", score: 3}]},
    {class: "XI", subject: [{name: "abc", score: 2},{name: "def", score: 2}]},
    {class: "XII", subject: [{name: "abc", score: 3},{name: "def", score: 1}]}
]

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

a 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 class of classes; let ind = index">
    {{class.class}}
    <div *ngFor="let mark of class.subject; 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>
</div>

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

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

Thanks.

Answer 1

PLease have a look at this solution and working stackblitz

<div *ngFor="let class of classes; let i = index">
  {{class.class}}
  <div *ngFor="let subject of class.subject; let j = index">
        {{subject.name}}
        <input type="radio" [value]="0" name="score_{{i}}_{{j}}" id="zero"
                                                    [(ngModel)]="subject.score">
        <input type="radio" [value]="1" name="score_{{i}}_{{j}}" id="one"
                                                    [(ngModel)]="subject.score">
        <input type="radio" [value]="2" name="score_{{i}}_{{j}}" id="two"
                                                    [(ngModel)]="subject.score">
        <input type="radio" [value]="3" name="score_{{i}}_{{j}}" id="three"
                                               [(ngModel)]="subject.score">
  </div>
</div>

<div >
 <ul *ngFor="let class of classes;">
  <span style="background:cyan"> Class :  {{class.class}}</span>
   <li *ngFor="let subject of class.subject;">
     <span style="background:yellow">  Subject Name : {{subject.name }}</span><br/>
      <span style="background:pink">   Score : {{subject.score }}</span>
     </li>
 </ul>
</div>

Answer 2

Firstly the data should be: (there's a typo in the question)

classes = [
  {
     class: "X",
     subject: [{ name: "abc", score: 1 }, { name: "def", score: 3 }]
  },
  {
     class: "XI",
     subject: [{ name: "abc", score: 2 }, { name: "def", score: 2 }]
  },
  {
     class: "XII",
     subject: [{ name: "abc", score: 3 }, { name: "def", score: 1 }]
  }
];

Next your template should use the following logic:

<div *ngFor="let class of classes; let i = index">
    {{class.class}}

    <div *ngFor="let mark of class.subject; let j = index">
        {{mark.name}}
       <input type="radio" [value]="0" [(ngModel)]="mark.score" 
              id="{{i}}_{{j}}" name="{{i}}_{{j}}"  >
       <input type="radio" [value]="1" [(ngModel)]="mark.score"
              id="{{i}}_{{j}}" name="{{i}}_{{j}}">
       <input type="radio" [value]="2" [(ngModel)]="mark.score"
              id="{{i}}_{{j}}" name="{{i}}_{{j}}">
       <input type="radio" [value]="3" [(ngModel)]="mark.score"
              id="{{i}}_{{j}}" name="{{i}}_{{j}}">              
    </div>

</div>

The reason your code didn't work was because the id and name attributes being generated on the template were not unique. So when you change the score for one student all the other scores were reflecting the same. To resolve this use proper indices from the inner and outer loops to maintain uniqueness for both attributes as shown above.

Answer 3

In you code name attribute of radio button is same for all the radio buttons. Try this

name="score{{i}}_{{j}}"

Also you have taken same index variable for inner and outer for loop. please change that as well. Find full html below.

<div *ngFor="let class of classes; let i = index">
  {{class.class}}
  <div *ngFor="let mark of class.subject; let j = index">
        {{mark.name}}
        <input type="radio" [value]="0" name="score{{i}}_{{j}}" id="zero"
                                                    [(ngModel)]="mark.score">
        <input type="radio" [value]="1" name="score{{i}}_{{j}}" id="one"
                                                    [(ngModel)]="mark.score">
        <input type="radio" [value]="2" name="score{{i}}_{{j}}" id="two"
                                                    [(ngModel)]="mark.score">
        <input type="radio" [value]="3" name="score{{i}}_{{j}}" id="three"
                                                    [(ngModel)]="mark.score">
    
  </div>
</div>

hope this will solve your problem.