如何使用* ngIf在幻灯片IONIC中获得价值

Question

我在幻灯片中使用* ngIf来获取幻灯片中id_qtype的所有值

id_qtype参数有5个值是：

id_qtype = 1;
id_qtype = 2;
id_qtype = 3;
id_qtype = 4;
id_qtype = 5;

当我使用* ngIf如下时，它似乎获取数据不正确

我的资料来源：

HTML ：

<ion-slides>             
<ion-slide *ngFor="let myValue of item; let i = index;">
<div *ngIf="myValue.id_qtype =='1'>     <!-- ;else elsetag" -->
<ion-list radio-group>
    <ion-item no-lines no-padding class="mark_answer_inside">
        <ion-label>① <div class="mark_answer" [innerHTML]= "myValue.ex1"></div></ion-label>                                
    </ion-item>                           
    <ion-item no-lines no-padding>
        <ion-label>② <div class="mark_answer" [innerHTML]= "myValue.ex2"></div> </ion-label>                  
    </ion-item>
</ion-list>
</div>

<div *ngIf="myValue.id_qtype =='2'>     
<ion-list radio-group>
    <ion-item no-lines no-padding class="mark_answer_inside">
        <ion-label>① <div class="mark_answer" [innerHTML]= "myValue.ex1"></div></ion-label>                                
    </ion-item>                           
    <ion-item no-lines no-padding>
        <ion-label>② <div class="mark_answer" [innerHTML]= "myValue.ex2"></div> </ion-label>                  
    </ion-item>
</ion-list>
</div>

<div *ngIf="myValue.id_qtype =='3'>     
<ion-list radio-group>      
    <ion-item no-lines no-padding>
        <ion-label>② <div class="mark_answer" [innerHTML]= "myValue.ex2"></div> </ion-label>                  
    </ion-item>
</ion-list>
</div>

<div *ngIf="myValue.id_qtype =='4'>     
<ion-list radio-group>
    <ion-item no-lines no-padding class="mark_answer_inside">
        <ion-label>① <div class="mark_answer" [innerHTML]= "myValue.ex1"></div></ion-label>                                
    </ion-item>                           
    <ion-item no-lines no-padding>
        <ion-label>② <div class="mark_answer" [innerHTML]= "myValue.ex2"></div> </ion-label>                  
    </ion-item>
</ion-list>
</div>

<div *ngIf="myValue.id_qtype =='5'>     
<ion-list radio-group>
    <ion-item no-lines no-padding class="mark_answer_inside">
        <ion-label>① <div class="mark_answer" [innerHTML]= "myValue.ex1"></div></ion-label>                                
    </ion-item>                                 
</ion-list>
</div>
<ion-slides>
</ion-slide>

当幻灯片中id_qtype = 1或2或3或4或5时如何获得正确的值？

Answer 1

您可以像下面的代码一样使用ngSwitch ：

<div [(ngSwitch)]="caseView" class="content-div-style">
<ion-list *ngSwitchCase="'1'">
</ion-list>
<ion-list *ngSwitchCase="'2'">
</ion-list>
<ion-list *ngSwitchCase="'3'">
</ion-list>
</div>

根据以上代码，您可以在不同的情况下使用ngSwitch 。