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

时间:2018-04-02 08:52:20

标签: angular ionic-framework ionic3

我在幻灯片中使用* 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时获取正确的值?

1 个答案:

答案 0 :(得分:0)

您可以使用以下代码中的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