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

Question

我是 angular 的新手，需要您帮助解决我的一个问题。我有一个场景，我从 API 中获取一组对象，比如

[
    {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}]}
]

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

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

我的 angular 代码是

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

如果我运行代码，我只会得到列表中的姓氏分数与分数进行核对，而上述分数的其余部分显示为空白。

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

谢谢。

Answer 1

在您的单选按钮代码名称属性中，所有单选按钮都相同。试试这个

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

您还为内部和外部 for 循环采用了相同的索引变量。请也改变它。在下面找到完整的 html。

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

希望这能解决您的问题。

Answer 2

请看看这个解决方案并正常工作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 3

首先数据应该是：（题目有错别字）

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 }]
  }
];

接下来您的模板应使用以下逻辑：

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

您的代码不起作用的原因是模板上生成的 id 和 name 属性不是唯一的。因此，当您更改一个学生的分数时，所有其他分数都反映相同。要解决此问题，请使用来自内部和外部循环的适当索引来保持两个属性的唯一性，如上所示。

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

Angular radio button show wrong data with ngFor

html

javascript

radio-button

typescript

angular