Angular中根据API数据动态显示表格正确选项图标的教程

interface Option {
  id: number; // 选项的唯一标识符，对应API返回的答案值
  text: string; // 选项的文本内容
  isCorrect: boolean; // 标记此选项是否为正确答案
}

interface Question {
  id: number; // 问题的唯一标识符
  text: string; // 问题内容
  options: Option[]; // 问题的选项列表
  correctAnswerId: string; // 从API获取的正确答案ID（例如"2"）
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-quiz',
  templateUrl: './quiz.component.html',
  styleUrls: ['./quiz.component.css']
})
export class QuizComponent implements OnInit {

  // 模拟从API获取的正确答案
  apiCorrectAnswers = { ans1: "2", ans2: "1", ans3: "3" };

  // 原始的问题和选项数据（通常从API获取或硬编码）
  // 注意：这里的id和correctAnswerId应与apiCorrectAnswers中的键值对应
  rawQuestionsData = [
    {
      id: 1,
      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,
      text: "How investment is it?",
      options: [
        { id: 1, text: "normal" },
        { id: 2, text: "semi normal" },
        { id: 3, text: "semi hard" },
        { id: 4, text: "hard" }
      ]
    },
    {
      id: 3,
      text: "Why investment is it?",
      options: [
        { id: 1, text: "normal" },
        { id: 2, text: "semi normal" },
        { id: 3, text: "semi hard" },
        { id: 4, text: "hard" }
      ]
    }
  ];

  questions: Question[] = []; // 最终用于模板渲染的数据

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

  processQuestionsData(): void {
    this.questions = this.rawQuestionsData.map(q => {
      const questionKey = `ans${q.id}`; // 根据问题ID构造API答案的键
      const correctAnswerIdFromApi = this.apiCorrectAnswers[questionKey];

      return {
        ...q,
        correctAnswerId: correctAnswerIdFromApi, // 存储API返回的正确答案ID
        options: q.options.map(opt => ({
          ...opt,
          // 判断当前选项的ID是否与API返回的正确答案ID匹配
          isCorrect: String(opt.id) === correctAnswerIdFromApi
        }))
      };
    });
    console.log(this.questions); // 检查处理后的数据结构
  }
}

<table style="width:100%; border-collapse: collapse;">
  <thead>
    <tr>
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Sr. No</th>
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Question</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历所有问题 -->
    <ng-container *ngFor="let question of questions; let qIndex = index">
      <tr>
        <td style="border: 1px solid #ddd; padding: 8px;">{{ qIndex + 1 }}</td>
        <td style="border: 1px solid #ddd; padding: 8px;">{{ question.text }}</td>
      </tr>
      <!-- 遍历当前问题的所有选项 -->
      <tr *ngFor="let option of question.options; let oIndex = index">
        <td style="border: 1px solid #ddd; padding: 8px;">
          {{ ['a', 'b', 'c', 'd'][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 *ngIf="qIndex < questions.length - 1">
        <td colspan="2" style="border-bottom: 2px solid #eee; padding: 5px;"> </td>
      </tr>
    </ng-container>
  </tbody>
</table>