我有一个应用程序，用户必须回答 50 个问题。 我通过网络服务收到这些问题，相关答案也在网络服务中。我将这些问题分配给票号。 每 50 个问题和相关答案属于一张票。
我的问题是显示和保存最终用户的选择。这里的最佳做法是什么。
我使用打字稿和角度。
我目前的做法是：
创建一个包含 50 条记录的表格，每行都有一个下拉列表来回答问题。所以我预取问题并显示下拉列表。
我的问题是我不知道如何访问 50 条记录中的每一行来确定它们是否已回答并保存。
我想一次全部保存（如果全部回答）或一个一个保存（这不是首选解决方案，因为它可能不是自主事务？）。
我通过对表格使用 formGroup 进行了尝试。但这并不成功。
也许这个表格是一个完全错误的方法？
感谢任何帮助！ 奥热雷斯
【问题讨论】：
formArray
标签： angular typescript
这个问题与用户体验和项目需求有很大关系。
从用户的角度来看，如果您需要回答 50 个问题并单击每个问题的下拉菜单，然后等待相关答案被提取并绘制在问题下方，那么这个问题有点痛苦。这里最好的方法是从 Web 服务中获取所有问题以及相关答案（全部在一个 http 调用中），然后仅将它们绘制在表格或任何其他元素中。
但如果用户只问几个答案，那么您的方法是正确的。您可以使用 Reactive Forms 和 FormArray 在 Angular 中轻松完成。我会这样做：
<div *ngFor="let question of questions">
<button (click)="questionsUnfoldedMap[question.id]">Fold/Unfold</button>
<p>{{ question.title }}</p>
<app-related-questions *ngIf="isQuestionUnfolded()"
[relatedAnswers]="relatedAnswersMap[question.id]"
(questionAnswered)="onQuestionAnswered(question.id, $event)">
</app-related-questions>
</div>
让我们解释一下代码。您将需要维护一个地图（只是一个 javascript 对象）以了解哪些问题被折叠或展开（关键是问题 id，值只是一个布尔值（上面的 html 中的questionsUnfoldedMap）。每次你展开一个问题，您需要从 Web 服务获取数据并将其存储在另一个地图中（relatedAnswersMap，即传递给存储每个问题答案的RelatedQuestionsComponent）。每次用户回答问题时，嵌套组件中的onQuestionAnswered(questionId, $event) 将被触发。在此方法中，您只需将问题 id 的答案 id 存储在表单数组中，并在用户提交表单时将其发送到服务器。
最后，我不知道您需要如何将数据发送到 Web 服务，但在这种情况下，我建议您在单个 http 调用中发送所有数据，因为如果用户回答了所有问题您需要调用 50 次 Web 服务...
【讨论】：
非常感谢您的回答。 我认为最好一次显示所有 50 个问题。并且有大约 2-5 个答案......在一个下拉列表中。
我现在做的是html中的以下内容：
<div class="row justify-content-center">
<div class="col-8">
<form name="editForm" novalidate (ngSubmit)="submit()" #editForm="ngForm">
<h2 id="jhi--entry-heading">Create or edit a Entry Test</h2>
<div class="table-responsive" *ngIf="Questions">
<table class="table table-striped">
<thead>
<tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="reset.bind(this)">
<th jhiSortBy="id"><span>ID</span>
<fa-icon [icon]="'sort'"></fa-icon>
</th>
<th jhiSortBy="name"><span>Question</span>
<fa-icon [icon]="'sort'"></fa-icon>
</th>
</tr>
</thead>
<tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
<tr *ngFor="let Question of Questions ;trackBy: trackId; let i = index;">
<th scope="row">{{Question.id}}</th>
<td>{{Question.name}} {{Question.description}}</br>
<select class="form-control" id="answerid">
<option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option>
<option *ngFor="let answer of Question.answers; let j = index;" [value]="answer.id">{{answer.description}}</option>
</select>
</td>
</tr>
</tbody>
<div>
<button type="button" id="cancel-save" class="btn btn-secondary" (click)="previousState()">
<fa-icon [icon]="'ban'"></fa-icon> <span>Cancel</span>
</button>
<button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
<fa-icon [icon]="'save'"></fa-icon> <span>Save</span>
</button>
</div>
</form>
</div>
此表工作正常，它是从服务中预填充的，您可以从下拉列表中选择一个项目。 但是现在我完全迷失了如何从打字稿访问表中的各个记录。我想访问选定的答案 + 相关问题。我可以将完整的表格作为一个对象接收吗？
感谢您的帮助！ 奥格勒斯
【讨论】：