Question

我在页面上显示51个问题及其相关答案。两种信息都来自一个Web服务呼叫。

<tbody>
   <tr *ngFor="let QuestionOption of questions; trackBy: trackQuestionById; let i = index;">
   <th scope="row">{{QuestionOption.id}}</th>
   <td>{{QuestionOption.name}} {{QuestionOption.description}}
    </p>
     <select  class="form-control"  name="selectAnswer" [(ngModel)]="answer[i]">
     <option *ngFor="let answers of QuestionOption.Answers" [ngValue]="answers.id">{{answers.description}}</option>
    </p>
   </td>
</tr>
</tbody>

在打字稿代码上，我尝试以下操作：

answer: Answer[];
this.answer = new Array<Answer>();

答案类型具有多个字段，例如：ID，名称，分数，说明

不起作用的是，我总是把Id输入答案[i] 但我想在字段answer [i] .id

中添加ID

如果我更改

[(ngModel)]="answer[i]"

进入

[(ngModel)]="answer[i].id"

我得到以下异常：错误TypeError：“ _ co.caaAnswer [_v.context.index]未定义”

我也尝试过：

[(ngModel)]="answer[i]?.id"

那么使用答案[i]是否正确？然后在选项中，我应该以某种方式将选定的值分配给answer [i] .id。如果是这样的话，有人可以帮忙。

感谢您的帮助！非常感谢。奥格莱斯

Answer 1

您必须像这样在选择更改时加入答案

<select  class="form-control"  name="selectAnswer" [(ngModel)]="selectedAnswerId" (change)="setAnswer(i)">
 <option *ngFor="let answers of QuestionOption.Answers" [ngValue]="answers.id">{{answers.description}}</option>
<select>

在component.ts

中

selectedAnswerId : number;
setAnswer(index){
  this.answer[index].push({id : this.selectedAnswerId})
}

Answer 2

我找到了解决方案。问题是由于数组，compareWith函数无法正常工作。仅当您根据数组索引命名html select时，它才起作用：

工作版本：

<select class="form-control" id="field_answer{{i}}" name="field_answer{{i}}" [(ngModel)]="resultAnswer[i].answer" [compareWith]="compareFn">
<option [ngValue]="answer" *ngFor="let answer of Question.answers; trackBy: trackAnswerById">{{answer.id}} {{answer.description}}</option>
</select>

带有Angular和Typescript中的select选项的数组

2 个答案: