Angular根据API返回结果在表格正确选项前显示勾选图标

问题核心原因 #

原有实现用全局布尔变量showOption绑定所有选项的勾选图标显隐，只能控制所有图标统一显示/隐藏，没有建立「题目编号-接口返回答案值-选项序号」的映射关系，无法实现单选项的精准显隐控制。
已知接口返回答案格式为{ans1: "2", ans2: "1", ans3: "3"}，匹配规则为：键名ansN对应第N题，值为字符串类型的数字M，对应第N题的第M个选项（a=1、b=2、c=3、d=4）。

具体实现步骤 #

1. 修改TS层代码 #

删除原有无效的showOption变量，定义存储正确答案的对象，在接口请求成功后赋值返回数据即可：

// 存储接口返回的答案映射
correctAnswers: Record<string, string> = {};

// 替换为实际的接口请求逻辑
getCorrectAnswers() {
  this.xxxApiService.getQuestionAnswers().subscribe(res => {
    // res格式与接口约定一致：{ans1: "2", ans2: "1", ans3: "3"}
    this.correctAnswers = res;
  })
}

注意：接口返回的答案值为字符串类型，后续判断时需用字符串值做对比，避免类型不一致导致判断失效。

2. 修改HTML模板判断逻辑 #

将原有所有绑定showOption的*ngIf条件，替换为「当前题对应的答案值 === 当前选项序号」的判断即可，修改后的完整模板代码如下：

<table style="width:100%">
  <tr>
      <th>Sr. No</th>
      <th>Question</th>
  </tr>
  <!-- 第一题 -->
  <tr>
      <td>1</td>
      <td>What type of investment is it?</td>
  </tr>
  <tr>
      <td>a</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans1'] === '1'"></ion-icon>normal</td>
  </tr>
  <tr>
      <td>b</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans1'] === '2'"></ion-icon>semi normal</td>           
  </tr>
  <tr>
      <td>c</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans1'] === '3'"></ion-icon>semi hard</td>         
  </tr>
  <tr>
      <td>d</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans1'] === '4'"></ion-icon>hard</td>          
  </tr>
  <tr>
      <td colspan="2">&nbsp;</td>
  </tr>
  <!-- 第二题 -->
  <tr>
      <td>2</td>
      <td>How investment is it?</td>
  </tr>
  <tr>
      <td>a</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans2'] === '1'"></ion-icon>normal</td>
  </tr>
  <tr>
      <td>b</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans2'] === '2'"></ion-icon>semi normal</td>           
  </tr>
  <tr>
      <td>c</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans2'] === '3'"></ion-icon>semi hard</td>         
  </tr>
  <tr>
      <td>d</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans2'] === '4'"></ion-icon>hard</td>          
  </tr>
  <tr>
      <td colspan="2">&nbsp;</td>
  </tr>
  <!-- 第三题 -->
  <tr>
      <td>3</td>
      <td>Why investment is it?</td>
  </tr>
  <tr>
      <td>a</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans3'] === '1'"></ion-icon>normal</td>        
  </tr>
  <tr>
      <td>b</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans3'] === '2'"></ion-icon>semi normal</td>           
  </tr>
  <tr>
      <td>c</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans3'] === '3'"></ion-icon>semi hard</td>         
  </tr>
  <tr>
      <td>d</td>
      <td><ion-icon name="checkmark-outline" *ngIf="correctAnswers['ans3'] === '4'"></ion-icon>hard</td>          
  </tr>
</table>

可选优化（题目量大时推荐） #

如果题目数量较多，不需要硬编码每一行的题目和选项结构，可以将题目数据整理为数组，用*ngFor循环渲染，大幅减少重复代码：

• TS层新增题目数组定义：

questionList = [
  {
    id: 1,
    title: 'What type of investment is it?',
    options: ['normal', 'semi normal', 'semi hard', 'hard']
  },
  {
    id: 2,
    title: 'How investment is it?',
    options: ['normal', 'semi normal', 'semi hard', 'hard']
  },
  {
    id: 3,
    title: 'Why investment is it?',
    options: ['normal', 'semi normal', 'semi hard', 'hard']
  }
]

• 模板层用循环替代硬编码：

<table style="width:100%">
  <tr>
      <th>Sr. No</th>
      <th>Question</th>
  </tr>
  <ng-container *ngFor="let question of questionList">
    <tr>
      <td>{{question.id}}</td>
      <td>{{question.title}}</td>
    </tr>
    <tr *ngFor="let option of question.options; let index = index">
      <td>{{['a','b','c','d'][index]}}</td>
      <td>
        <ion-icon 
          name="checkmark-outline" 
          *ngIf="correctAnswers['ans' + question.id] === (index + 1).toString()">
        </ion-icon>
        {{option}}
      </td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
  </ng-container>
</table>

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