Question

我有一个应用程序，用户必须回答50个问题。我通过网络服务收到的这些问题以及相关的答案也在网络服务中。我将这些请求分配给票证编号。每50个问题和相关答案属于一张票。

我的问题是显示并保存最终用户的选择。最佳做法是什么？

我使用打字稿和尖角字体。

我目前的做法是：

创建一个表，其中包含50条记录，并在每行中都有一个下拉列表，以回答问题。因此，我预取了问题并显示了下拉列表。

我的问题是，我不知道如何访问50条记录的每一行，以识别它们是否已回答并保存。

我想一次全部保存它们（如果回答了所有问题）或一一保存（这不是首选的解决方案，因为它可能不是自主事务？）。

我通过对表格使用formGroup进行了尝试。但这并不成功。

也许表格是完全错误的方法？

感谢您的帮助！螺旋钻

Answer 1

这个问题与用户体验和项目要求有很大关系。

从用户的角度来看，如果您需要回答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次网络服务...

Answer 2

非常感谢您的回答。我认为最好一次显示所有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>&nbsp;<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>&nbsp;<span>Save</span>
                        </button>
                    </div>
        </form>
    </div>

该表工作正常，可以从服务中预先填写，您可以从下拉列表中选择一个项目。但是现在我完全迷失了如何从打字稿中访问表中的各个记录。我要访问所选答案和相关问题。我可以将完整的表格作为一个对象接收吗？

感谢您的帮助！奥格莱斯

如何批量创建记录

2 个答案: