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

Question

我在一个页面上显示 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、姓名、分数、描述

不起作用的是我总是将 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 选定的值。如果是这样，有人可以帮助如何做到这一点。

感谢任何帮助！非常感谢。奥热尔

Answer 1

你必须像这样select改变

来回答问题

<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

我找到了解决方案。问题是由于 Array.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 选项的数组

Array with select option in Angular and Typescript

html

arrays

typescript

angular-ngmodel

angular