Angular 和 Typescript 中带有选择选项的数组答案

【问题标题】：Array with select option in Angular and TypescriptAngular 和 Typescript 中带有选择选项的数组
【发布时间】：2019-08-24 20:16:55
【问题描述】：

我在一个页面上显示 51 个问题及其相关答案。这两个信息都来自一个网络服务调用。

<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>();

Answer 类型有多个字段，例如：Id、Name、Score、Description

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

中有 id

如果我改变了

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

进入

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

我得到以下异常：错误类型错误：“_co.caaAnswer[_v.context.index] 未定义”

我也试过了：

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

那么使用 answer[i] 是否正确？然后在选项中我应该以某种方式将所选值分配给 answer[i].id 。如果是这样，有人可以帮助如何做到这一点。

感谢任何帮助！非常感谢。奥格勒斯

【问题讨论】：

作为附加信息，重要的是要说显示工作正常。只是保存信息是行不通的。
为什么你把答案设为数组？
@ArunKumarMN 因为我有 51 个问题，旁边有相关的答案。每个问题都有一组潜在的单独答案。

标签： html arrays angular typescript angular-ngmodel

【解决方案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})
}

【讨论】：

我把它改成了这样：this.caaAnswers[index] = { id : this.selectedAnswerId[index] };并在组件中： [(ngModel)]="selectedAnswer[i] 因为我有一组问题和可能的答案。但是您的代码工作正常！！！谢谢

【解决方案2】：

我找到了解决方案。问题是由于 Array.compareWith 函数无法正常工作。它仅适用于您根据数组索引命名 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>

【讨论】：