Question

我对Angular很新，所以我发现这部分令人困惑。我试图显示从数据库（ASP.NET Core 2.0作为Web API）获得的问题列表，并显示每个问题的选项。问题和选项是一对多的关系（数据库设计）。

但是，我不知道如何在一个页面中显示问题及其各自的选项，并获取问题ID及其选定的选项。我正在尝试使用这种方法的反应形式。我的代码如下。

checklistform.component.html

    <form [formGroup]="CheckListForm">
         <div class="form-group">
    <label class="center-block"> Name:
   <input class="form-control" formControlName = "name">
  </label>
     </div>


    <div class="form-group">
      <label class="center-block"> Employement Type:
  <input class="form-control" formControlName = "EmploymentType">
 </label>
  </div>

  <div class="form-group">
    <label class="center-block"> HRMS:
    <input class="form-control" formControlName = "HRMS">
 </label>
   </div>


  <div class="form-group">
   <label class="center-block"> CompanyName:
   <input class="form-control" formControlName = "CompanyName">
  </label>
      </div>


   <div formArrayName="questions" class="well well-lg">
    <div *ngFor="let question of questions.controls; let i=index" 
     [formGroupName]="i" >
            <div class="form-group">

                    //template for questions and options must be listed 
                       here.

这是我的.ts文件。 checklistform.component.ts

       import { ChecklistService } from './../service/checklist.service';
       import { Component, OnInit,OnChanges } from '@angular/core';
        import { FormGroup,
                 FormBuilder,
                  FormArray,
                 FormControl,
                  Validators, } from '@angular/forms';


              @Component({
                  selector: 'app-check-list-form',
                   templateUrl: './check-list-form.component.html',
                   styleUrls: ['./check-list-form.component.css']
                                                                  })
           export class CheckListFormComponent implements OnInit, OnChanges{


                    CheckListForm: FormGroup;


              Questions: any = [];

              constructor(private fb: FormBuilder,
                      private checklistservice: ChecklistService) { 
                   this.CreateForm();

                                    }

              ngOnInit() { 

     this.checklistservice.getQuestions(1).subscribe(res => this.Questions = 
             res); }

              ngOnChanges() {

                            }

            CreateForm() {

             this.CheckListForm = this.fb.group({

                name: ['', Validators.required],
              EmploymentType: ['', Validators.required],
              HRMS: ['', Validators.required],
             CompanyName:'',

            questions: this.fb.array([

             this.fb.group({

           ques: ['', Validators.required],
             choices: ['', Validators.required]
          })
           ]) 

          })
           }

             get questions(): FormArray {
             return this.CheckListForm.get('questions') as FormArray;
               }
              }

请帮忙。我试过通过互联网搜索，但我无法找到解决方案。

Answer 1

如果你的回答如下，那么处理

会更好

 Questions: any[] = [
       {
          'Question': 'question-1',
          'Options': [
            {
              "id": 1
              "option": "A"
            },
            {
               "id": 2
              "option": "B"
            },
          ]
        },
         {
          'Question': 'question-2',
          'Options': [
            {
               "id": 1
              "option": "A"
            },
            {
                "id": 2
              "option": "B"
            },
          ]
        }
    ]

HTML

 <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
    <!-- we will place our fields here -->

    <!-- name -->
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name">
        <!--display error message if name is not valid-->
        <small *ngIf="!myForm.controls.name.valid" class="text-danger">
            Name is required (minimum 5 characters).
        </small>
    </div>

    <!-- list of Question -->
    <div formArrayName="questions">
        <div *ngFor="let question of Questions; let i=index">


            <!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
            <div [formGroupName]="i">
                <!--street-->
                <div *ngFor="let opt of question.Options; let j=index">
                    <label>Option : </label>
                    <input type="checkbox" formControlName="Option1" value="1">
                    <!--display error message if street is not valid-->

                </div>
            <div>
        </div>
    </div>
    <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

试试这个

Answer 2

您可以使用PrimeNG UI组件中的ListBox控件来显示问题。以下是PrimeNG ListBox控件的链接

https://www.primefaces.org/primeng/#/listbox

您可以参考以下博客，了解有关PrimeNG软件包安装以及如何在Angular应用程序中使用的更多信息。

http://hive.rinoy.in/how-to-add-primeng-ui-components-in-asp-net-core-2-and-angular-web-application/

Answer 3

所提供的答案都不正确。

要解决此问题，您需要使用以下内容：

FormGroup
Formarray。

您需要通过FormArray迭代模型，然后相应地显示每个问题的选项。

对于我建议的这种方法，您需要使用反应形式。

您的所有问题及其选项都会显示在一个页面中。

如何使用选项显示测验问题并在Angular 5中保存所选选项？

3 个答案: