Angular：优化表格数据结构与动态渲染，实现API驱动的正确选项图标显示

// src/app/interfaces/question.interface.ts
export interface Option {
  id: string; // 选项的唯一标识符，与API返回的正确答案ID匹配
  text: string; // 选项文本
  isCorrect: boolean; // 标记此选项是否为正确答案
}

export interface Question {
  id: string; // 问题的唯一标识符，与API返回的答案键匹配（如 '1' 对应 'ans1'）
  text: string; // 问题内容
  options: Option[]; // 问题的选项列表
}

{
  "ans1": "2", // 问题1的正确选项ID是2
  "ans2": "1", // 问题2的正确选项ID是1
  "ans3": "3"  // 问题3的正确选项ID是3
}

// src/app/quiz/quiz.component.ts
import { Component, OnInit } from '@angular/core';
import { Question, Option } from '../interfaces/question.interface'; // 导入接口

@Component({
  selector: 'app-quiz',
  templateUrl: './quiz.component.html',
  styleUrls: ['./quiz.component.css']
})
export class QuizComponent implements OnInit {
  questions: Question[] = [];
  // 模拟API返回的正确答案数据
  apiCorrectAnswers: { [key: string]: string } = {
    ans1: "2",
    ans2: "1",
    ans3: "3"
  };

  ngOnInit(): void {
    this.loadQuestions();
  }

  loadQuestions(): void {
    // 模拟从后端获取的原始问题数据（不包含isCorrect字段）
    const rawQuestionsData = [
      {
        id: '1', // 对应 apiCorrectAnswers 中的 ans1
        text: 'What type of investment is it?',
        options: [
          { id: '1', text: 'normal' },
          { id: '2', text: 'semi normal' },
          { id: '3', text: 'semi hard' },
          { id: '4', text: 'hard' }
        ]
      },
      {
        id: '2', // 对应 apiCorrectAnswers 中的 ans2
        text: 'How investment is it?',
        options: [
          { id: '1', text: 'very low' },
          { id: '2', text: 'low' },
          { id: '3', text: 'medium' },
          { id: '4', text: 'high' }
        ]
      },
      {
        id: '3', // 对应 apiCorrectAnswers 中的 ans3
        text: 'Why investment is it?',
        options: [
          { id: '1', text: 'growth' },
          { id: '2', text: 'stability' },
          { id: '3', text: 'liquidity' },
          { id: '4', text: 'diversification' }
        ]
      }
    ];

    // 将原始数据与API正确答案进行映射，生成最终的questions数组
    this.questions = rawQuestionsData.map(q => {
      const correctOptionId = this.apiCorrectAnswers[`ans${q.id}`]; // 获取当前问题的正确选项ID
      return {
        ...q, // 复制问题的所有属性
        options: q.options.map(opt => ({
          ...opt, // 复制选项的所有属性
          isCorrect: opt.id === correctOptionId // 判断当前选项是否为正确答案
        }))
      };
    });
  }

  // 辅助函数：将选项索引转换为字母（a, b, c, d...）
  getOptionLetter(index: number): string {
    return String.fromCharCode(97 + index); // 97是'a'的ASCII码
  }
}

<!-- src/app/quiz/quiz.component.html -->
<div class="quiz-container">
  <h2>问答列表</h2>
  <table style="width:100%; border-collapse: collapse;">
    <thead>
      <tr style="background-color: #f2f2f2;">
        <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">序号</th>
        <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">问题 / 选项</th>
      </tr>
    </thead>
    <tbody>
      <!-- 遍历每个问题 -->
      <ng-container *ngFor="let question of questions; let qIndex = index">
        <!-- 问题行 -->
        <tr>
          <td style="border: 1px solid #ddd; padding: 8px; font-weight: bold;">{{ qIndex + 1 }}</td>
          <td style="border: 1px solid #ddd; padding: 8px; font-weight: bold;">{{ question.text }}</td>
        </tr>
        <!-- 遍历当前问题的每个选项 -->
        <tr *ngFor="let option of question.options; let oIndex = index">
          <td style="border: 1px solid #ddd; padding: 8px;">{{ getOptionLetter(oIndex) }}</td>
          <td style="border: 1px solid #ddd; padding: 8px;">
            <!-- 根据option.isCorrect属性条件显示勾选图标 -->
            <ion-icon name="checkmark-outline" *ngIf="option.isCorrect" style="color: green; margin-right: 5px;"></ion-icon>
            {{ option.text }}
          </td>
        </tr>
        <!-- 问题之间的分隔行 -->
        <tr>
          <td colspan="2" style="height: 15px;"> </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>