在Angular和Typescript中使用select选项的数组

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，Name，Score，Description

什么是无效的是我总是得到我的答案[我]，但我想在现场回答[i] .id

如果我改变了

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

成

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

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

我也尝试过：

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

那么使用答案[i]是否正确？然后在选项中我应该以某种方式分配回答[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函数由于Array而无法正常工作。它只适用于根据数组索引命名html选择的情况：

工作版本：

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