时间戳

首页 > 解决方案 > Angular 和 Typescript 中带有选择选项的数组

html - Angular 和 Typescript 中带有选择选项的数组

问题描述

我在一个页面上显示 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 放入 answer[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 。如果是这样，有人可以帮助如何做到这一点。

任何帮助表示赞赏！非常感谢。奥热雷斯

标签： htmlarraysangulartypescriptangular-ngmodel

解决方案

我找到了解决方案。问题是由于 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>

推荐阅读