根據APIAngular的結果在表格中顯示正確選項的圖示

我有一個 html 表格，其中有多個問題和每個問題的 4 個選項。我想為正確的選項顯示一個勾號圖示。我將在 API 中獲得正確的選項答案。問題是我沒有得到正確的方法來根據 API 值在正確選項前面顯示圖示。我嘗試了以下代碼：

API 回應：{ans1: "2", ans2: "1", ans3: "3"}

因此，如果第一個問題 2 是答案，那么我的勾號應該在第二個選項前面可見。

HTML 代碼：

<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 代碼：

showOption: boolean = false;

uj5u.com熱心網友回復：

在最基本的情況下，您希望遵循 @uKioops 的建議并遵循該指南。

2 秒鐘看一下它表明它將帶您從硬編碼的問題方法到設定您使用資料驅動的方法。例如，給出一個問題串列并使用*ngFor回圈來顯示它們。

例如，給出一個問題串列：

[
    { 
        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, ... },
    ...
]

然后，您可以查看*ngFor問題，為您提供問題串列，并在其中*ngFor查看選項串列以顯示選項和可選的檢查...

<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>

標籤：javascript html 有角度的 离子框架 角9

上一篇：想要使用gawkbash在控制臺輸出的時間戳中添加毫秒

下一篇：ionic4-設定頁面變數在iOS和Android中不起作用，但瀏覽器在瀏覽器中正常