Show icon for correct option in table based on result from API Angular-CodePudding

I have a html table where there are multiple questions and 4 options to each question. I want to show a tick icon for the correct option. I will be getting the correct option answer in an API. The problem is I am not getting the correct way to show the icon in front of the correct option based on the API value. I have tried the following code:

API Response: {ans1: "2", ans2: "1", ans3: "3"}

So if for first question 2 is the answer from then my tick should be visible in front of the 2nd option.

HTML Code:

<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="showOption"></ion-icon>normal</td>
        
        </tr>
        <tr>
            <td>b</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>semi normal</td>           
        </tr>
        <tr>
            <td>c</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>semi hard</td>         
        </tr>
        <tr>
            <td>d</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>hard</td>          
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td>1</td>
            <td>How investment is it?</td>
        
        </tr>
        <tr>
            <td>a</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>normal</td>
        
        </tr>
        <tr>
            <td>b</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>semi normal</td>           
        </tr>
        <tr>
            <td>c</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>semi hard</td>         
        </tr>
        <tr>
            <td>d</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>hard</td>          
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Why investment is it?</td>
        
        </tr>
        <tr>
            <td>a</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>normal</td>        
        </tr>
        <tr>
            <td>b</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>semi normal</td>           
        </tr>
        <tr>
            <td>c</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>semi hard</td>         
        </tr>
        <tr>
            <td>d</td>
            <td><ion-icon name="checkmark-outline" *ngIf="showOption"></ion-icon>hard</td>          
        </tr>
    </table>

TS Code:

showOption: boolean = false;

CodePudding user response：

At its most basic, you want to follow @uKioops's advice and follow that guide.

A 2-second look at it suggest it will take you from your hard-coded question approach to setting you up to use a data-driven approach. E.g. being given a list of questions and using an *ngFor loop to display them.

E.g. given a list of questions:

[
    { 
        id: 1, 
        text: "What type of investment is it?", 
        options: [
            { id: 1, text: "Some incorrect answer", isAnswer: false },
            { id: 2, text: "Correct answer", isAnswer: true },
            { id: 3, text: "Another incorrect", isAnswer: false }
        ]
    },
    { id: 2, ... },
    ...
]

You can then *ngFor over the questions, to give you a list of questions, and within that you can *ngFor over the list of options to show the options and optionally the check...

<ul *ngFor="let question of questions">
    <div>{{question.text}}</div>
    <li *ngFor="let option of question.options">
        <ion-icon name="checkmark-outline" *ngIf="option.isAnswer"></ion-icon> {{option.text}}
    </li>
</ul>