Angular 5中如何展示测验题目及选项并保存选中项？

嘿，我来帮你一步步搞定这个问题！作为Angular新手碰到一对多关系的表单确实容易懵，咱们拆解成几个核心步骤来解决：

1. 先定义对应的数据模型 #

首先得把后端返回的题目和选项结构在Angular里用接口对应上，毕竟是一对多关系，每个题目下包含多个选项：

// 选项接口
interface QuizOption {
  id: number;
  text: string;
  questionId: number; // 关联对应的题目ID
}

// 题目接口
interface QuizQuestion {
  id: number;
  text: string;
  options: QuizOption[]; // 一对多的选项数组
}

2. 从ASP.NET Core API获取数据 #

接下来创建一个服务来请求后端数据，比如QuizService：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { QuizQuestion } from './models/quiz.model';

@Injectable({ providedIn: 'root' })
export class QuizService {
  constructor(private http: HttpClient) {}

  // 获取题目列表（包含对应选项）
  getQuizQuestions(): Observable<QuizQuestion[]> {
    return this.http.get<QuizQuestion[]>('/api/quiz/questions');
  }
}

然后在你的组件里注入这个服务，订阅获取数据并保存：

import { Component, OnInit } from '@angular/core';
import { QuizService } from './quiz.service';
import { QuizQuestion } from './models/quiz.model';

@Component({...})
export class QuizComponent implements OnInit {
  questions: QuizQuestion[] = [];

  constructor(private quizService: QuizService) {}

  ngOnInit(): void {
    this.quizService.getQuizQuestions().subscribe(data => {
      this.questions = data;
      // 拿到数据后再初始化表单，这个很重要！
      this.initQuizForm();
    });
  }
}

3. 构建响应式表单（核心部分） #

因为要处理多个题目的选择，我们用FormArray来管理每个题目的响应，每个题目对应一个FormGroup，包含questionId（用来关联题目）和selectedOptionId（用户选中的选项ID）：

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

// 组件里新增表单相关代码
export class QuizComponent implements OnInit {
  quizForm: FormGroup;
  questions: QuizQuestion[] = [];

  constructor(
    private quizService: QuizService,
    private fb: FormBuilder // 注入FormBuilder
  ) {}

  // 获取FormArray的快捷方式
  get responses(): FormArray {
    return this.quizForm.get('responses') as FormArray;
  }

  ngOnInit(): void {
    // 先初始化表单结构
    this.quizForm = this.fb.group({
      responses: this.fb.array([])
    });

    this.quizService.getQuizQuestions().subscribe(data => {
      this.questions = data;
      this.initQuizForm();
    });
  }

  // 初始化表单的响应数组
  private initQuizForm(): void {
    // 清空之前的表单项（防止重复加载）
    this.responses.clear();

    this.questions.forEach(question => {
      // 给每个题目添加一个FormGroup
      this.responses.push(this.fb.group({
        questionId: [question.id], // 绑定题目ID，隐藏在表单里
        selectedOptionId: [''] // 用户选中的选项ID，初始为空
      }));
    });
  }
}

4. 模板渲染题目和选项 #

现在把数据和表单绑定到模板上，确保每个题目对应的选项和表单控件正确关联：

<form [formGroup]="quizForm">
  <!-- 绑定FormArray -->
  <div formArrayName="responses">
    <!-- 遍历每个题目和对应的FormGroup -->
    <div *ngFor="let question of questions; let i = index" [formGroupName]="i" class="question-container">
      <h4>{{ question.text }}</h4>
      <!-- 遍历当前题目的所有选项 -->
      <div *ngFor="let option of question.options" class="option-item">
        <label>
          <!-- 单选按钮绑定selectedOptionId控件，值为选项ID -->
          <input type="radio" formControlName="selectedOptionId" [value]="option.id">
          {{ option.text }}
        </label>
      </div>
      <!-- 隐藏控件存储题目ID，提交时会一起发送 -->
      <input type="hidden" formControlName="questionId">
    </div>
  </div>

  <button type="button" (click)="submitQuiz()" class="submit-btn">提交答案</button>
</form>

5. 获取用户选择的题目ID和选项 #

最后在提交方法里，直接从表单中拿到所有用户的响应，结构就是每个对象包含questionId和selectedOptionId：

submitQuiz(): void {
  if (this.quizForm.valid) {
    const userResponses = this.quizForm.value.responses;
    console.log('用户提交的答案:', userResponses);
    // 这里可以把userResponses传给你的ASP.NET Core API保存或处理
    // this.quizService.submitResponses(userResponses).subscribe(...);
  } else {
    // 处理表单验证不通过的情况，比如提示用户未完成所有题目
    alert('请完成所有题目！');
  }
}

额外小提示 #

• 别忘了在你的模块里导入ReactiveFormsModule和HttpClientModule，不然表单和HTTP请求都用不了哦！
• 如果需要支持多选题，只需要把单选按钮改成复选框，同时把selectedOptionId改成FormControl([])（数组类型），模板里用type="checkbox"即可。

内容的提问来源于stack exchange，提问作者sanmatrix