如何以角度跟踪 Double ngFor 循环中的索引？

Question

我正在设计一个反馈页面，其中有多个问题被问到，并且所有问题都有相同的多项选择答案。所以我设计如下。

options: string[] = ['Excellent', 'Fair', 'Good', 'Poor'];

  questions: any = [
    {
      question: "How would you rate A",
      answer: this.options,
      radioSelected: ""
    },
    {
      question: "How would you rate B",
      answer: this.options,
      radioSelected: ""
    },
    {
      question: "How would you rate C",
      answer: this.options,
      radioSelected: ""
    },
    {
      question: "How would you rate D",
      answer: this.options,
      radioSelected: ""
    },
    {
      question: "How would you rate E",
      answer: this.options,
      radioSelected: ""
    }
  ];

<div *ngFor="let q of questions; index as i">
        <label id="example-radio-group-label">{{q.question}}</label>
        <div class="row">
            <div class="form-check" *ngFor="let option of q.answer">
                <div class="col-md-3">
                    <input class="form-check-input" id="{{option}}" [value]="option" type="radio" name="options"
                        [(ngModel)]="q.radioSelected">
                    <label class="form-check-label" for="{{option}}">
                        {{option}}
                    </label>
                </div>
            </div>
        </div>
        <hr>
    </div>

代码在 UI 中显示良好。但是当我单击任何问题的单选按钮时，只会选择第一个问题的选项。我是 Angular 新手，请帮我解决这个问题。

Answer 1

您在收音机上缺少唯一名称属性。一组选项的名称应该是唯一的。

在您动态生成单选按钮的用例中，您可以使用循环索引来设置这样的名称 -

 <div *ngFor="let q of questions; let  questionIndex=index">
                    <label id="example-radio-group-label">{{q.question}}</label>
                    <div class="row">
                        <div class="form-check" *ngFor="let option of q.answer; let answerIndex=index">
                            <div class="col-md-3">
                                <input class="form-check-input" [value]="option" type="radio" name="options{{questionIndex}}{{answerIndex}}"
                                    [(ngModel)]="q.radioSelected">
                                <label class="form-check-label">
                                    {{option}}
                                </label>
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>

请检查工作示例here。

类似的问题here 和here。

希望对你有帮助！！

Answer 2

你可能正在渲染类似的东西

<div>Question 1</div>
<div>
  <div>
    <input id="Excellent" ...>
    <label for="Excellent">Ex</label>
  </div>
</div>

<div>Question 2</div>
<div>
  <div>
    <input id="Excellent" ...>
    <label for="Excellent">Ex</label><!-- This is pointing to the first input -->
  </div>
</div>

首先，不要重复id。你可以通过将input 包裹在label 中来避免<label for=""> 的复杂性：

<label><input />Excellent</label>

Answer 3

您可以将答案循环的索引分配给不同的名称，并将该索引与名称值连接起来。试试这个：

<div *ngFor="let q of questions; let  i=index">
    <label id="example-radio-group-label">{{q.question}}</label>
    <div class="row">
        <div class="form-check" *ngFor="let option of q.answer; let answerIndex=index">
            <div class="col-md-3">
                <input class="form-check-input" id="{{option}}" [value]="option" type="radio" name="options{{answerIndex}}"
                    [(ngModel)]="q.radioSelected">
                <label class="form-check-label" for="{{option}}">
                    {{option}}
                </label>
            </div>
        </div>
    </div>
    <hr>
</div>