0

我正在尝试开发一个 Web 应用程序，它向用户显示一组问题。问题根据类别进行隔离。该应用程序是使用 Angular6 开发的。使用后端 REST 服务获取问题。在客户端创建一个接口来模拟 REST 响应结构，该结构具有多个子接口来支持复杂的内部结构。响应将被映射为此接口的列表。以下是接口的结构。

在此处输入图像描述

我的意图是迭代List<ICategoryQuestion>，显示带有所有选项的问题，并使用用户选择的选项填充selectedAnswer。

由于我在整个应用程序中都遵循 ReactiveForm 方法，因此我想创建一个具有类似结构的FormGroup，假设它可以帮助我轻松地将selectedAnswer映射回列表。这将有助于使用另一个再次接受List<ICategoryQuestion>.

现在真正的挑战是创建一个具有相似结构的FormGroup 。起初，我创建了一个包含整个List<ICategoryQuestion>.

mainFormGroup: FormGroup = this.formBuilder.group({
   categoryQuestionList: this.formBuilder.array([]);
});

现在我必须控制数组（categoryQuestionList），然后将类别填充到它。

代码是类似的东西。

let categoryQuestionListControl = <FormArray> this.mainFormGroup.get("categoryQuestionList");

//iterate the **`List<ICategoryQuestion>`** create a FormGroup //representing each ICategoryQuestion and push it to the `categoryQuestionListControl`.

iterate list{
    categoryQuestionListControl.push(this.getCategoryQuestionFormGroup(categoryQuestion));
}

现在 categoryQuestionFormGroup 又有一个，它内部又保存了一个IOptionsList<IQuestionAnswer>数组，这会使代码更复杂。

您认为处理此类情况的理想方式是什么？我想在这里使用模板驱动方法吗？我什至怀疑我是否遵循正确的方法，因为我是 Angulat 2+ 的新手。

好心提醒。

4

1 回答 1

0

我认为表单组是不必要的，您可以在主控制器上控制最终的问卷，就像向导模式一样。我的方式喜欢：

let Categories = [{...},...];
let selectedCategory = null;
let categoryQuestions = null;
let questionnaire = null;
wizardManager() {
  if (! selectedCategory) {
    do step1 //popup window allow user choose category, then fill selectedCategory, CategoryQuestions and init questionnaire = {categoryId: id, answers:[]}
  else if (questionnaire.answers.length != categoryQuestions.length) {
    let question = categoryQuestions[questionnaire.answers.length];
    repeat step2 //popup window show question and answers, then save answer to questionnaire.answers
  } else {
    All question answered, submit it.
  }
}
init() {
  wizardManager();
}
popupWindow() {
  openModal, and let modal call wizardManager onDismiss
}
于 2019-01-04T02:35:51.303 回答