[编辑,帖子底部的新信息]
在我的应用程序中,我有几个不同的页面,其中包含一个 ion-slides 元素。除了一个之外,它们都可以正常工作,并且我已经设法跟踪 *ngFor 指令。
这是页面的html代码:
<ion-slides pager="false" class="mb-0 mr-2 ml-2">
<ion-slide *ngFor="let singolo of plafond; let i=index">
<ion-card class="res1-container">
<ion-card-subtitle class="text-center pt-2 pr-1 pl-1">{{singolo.nomeClasse}}</ion-card-subtitle>
<ion-card-subtitle>Massimale periodo <b>{{singolo.massimaleDisponibilePeriodo|currency: 'EUR'}}</b></ion-card-subtitle>
<ion-card-content class="res1-container res1-wrapper">
<ngx-gauge [type]="batchGaugeOpts.type"
[size]="batchGaugeOpts.size"
[value]="(singolo.totaleRimborsatoPeriodo/singolo.massimaleDisponibilePeriodo)*100"
[min]="0"
[max]="100"
[label]="batchGaugeOpts.label"
[thick]="batchGaugeOpts.thick"
[animate]="false"
[thresholds]="thresholdConfig"
[append]="batchGaugeOpts.append"
[cap]="batchGaugeOpts.cap"
>
<ngx-gauge-value>
{{((singolo.totaleRimborsatoPeriodo/singolo.massimaleDisponibilePeriodo)*100).toFixed(0)}}
</ngx-gauge-value>
</ngx-gauge>
</ion-card-content>
<div class="mt-0 pb-1 text-center" align="center"><span class="t-blue">{{i+1}} di {{plafond.length}}</span></div>
</ion-card>
</ion-slide>
</ion-slides>
填充“plafond”对象的打字稿代码是:
const userdata = await this.authenticationService.getUser();
const plafond = await this.getPlafondData(userdata);
setTimeout(async() => {
this.userdata = userdata;
this.plafond = plafond;
}, 1500);
getPlafondData 返回一个正确解析的承诺,这是我得到的 JSON 对象:
[{"idClasse":"1","nomeClasse":"Diaria da infortunio","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":"200.00","massimaleDisponibilePeriodo":600},{"idClasse":"2","nomeClasse":"Diaria da malattia","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":400,"massimaleDisponibilePeriodo":400},{"idClasse":"3","nomeClasse":"Diaria R.S.A.","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":200,"massimaleDisponibilePeriodo":200},{"idClasse":"4","nomeClasse":"Visite mediche specialistiche","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"5","nomeClasse":"Esami clinici, accertamenti diagnostici e trattamenti fisioterapici","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"6","nomeClasse":"Trattamenti termali","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"7","nomeClasse":"Servizio ambulanze","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"8","nomeClasse":"Servizio Taxi Sanitario","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"9","nomeClasse":"Sussidio Scuola","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":500,"massimaleDisponibilePeriodo":500}]
我已经使用 jsonlint.io 进行了验证。这是有效的。如果我不使用 *ngFor 指令,而是使用符号 plafond[index] 创建 9 张幻灯片,则这些幻灯片将正确呈现并可用。
真正奇怪的是,在应用程序的另一个页面上,我还有另一个滑块:
<ion-slides *ngIf="convenzionati?.length >0; else nessunrisultato;" pager="false">
<ion-slide *ngFor='let convenzionato of convenzionati; let i=index' class="mb-5">
<ion-card class="res1-container ml-1 mr-1 pl-1 pr-1">
<ion-card-content>
<ion-row>
<div class="col-lg-12 col-md-12 mt-md-3 pl-1 pr-1">
<div class="res1-wrapper">
<h1><span class="t-blue">{{convenzionato.nomeConvenzionato}}</span></h1>
<p class="spec">{{convenzionato.descrizioneTipoConvenzionato}}</p>
<div class="address-container mt-4 mb-3">
<ul>
<li>{{convenzionato.indirizzo}}</li>
<li>{{convenzionato.cap}}</li>
<li>{{convenzionato.comune}} ({{convenzionato.provincia}})</li>
<li><a href="tel://{{convenzionato.telefono}}">{{convenzionato.telefono}}</a></li>
<li><a href="mailto:{{convenzionato.email}}">{{convenzionato.email}}</a></li>
</ul>
</div>
<p class="spec" *ngIf="authenticationService.isAuthenticated()">{{convenzionato.agevolazioni}}</p>
</div>
</div>
</ion-row>
<ion-button class="bcc-button bcc-button-outline" shape="round" (click)="openMapsApp(convenzionato.indirizzo, convenzionato.comune)"><i class="fa fa-map-marker-alt fa-2x"></i></ion-button>
<!-- <ion-button fill="outline" (click)="openMapsApp(convenzionato.latitudine, convenzionato.longitudine)"><i class="fa fa-map-marker-alt fa-2x"></i></ion-button> -->
<ion-button class="bcc-button bcc-button-outline" shape="round" (click)="launchNav(convenzionato.indirizzo, convenzionato.comune)"><i class="fas fa-directions fa-2x"></i></ion-button>
<!-- <ion-button fill="outline" (click)="launchNav(convenzionato.latitudine, convenzionato.longitudine)"><i class="fas fa-directions fa-2x"></i></ion-button> -->
</ion-card-content>
<div class="mt-3 pb-1 text-center" align="center"><span class="t-blue">{{i+1}} di {{convenzionati.length}}</span></div>
</ion-card>
</ion-slide>
</ion-slides>
它以几乎相同的方式完美地获取数据:
this.convenzionati = await this.helperService.lookUp(lookUpCriteria);
几天来,我一直在努力解决这个问题,但找不到任何明显的东西。
这是我的离子信息输出:
Ionic:
Ionic CLI : 6.3.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.901.0
@angular-devkit/schematics : 9.1.0
@angular/cli : 9.1.0
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.0.0-beta.1
@capacitor/core : 2.0.0-beta.1
Utility:
cordova-res : 0.11.0
native-run : 0.3.0
System:
NodeJS : v10.15.3 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Catalina
编辑好吧,这比我想象的还要奇怪。如果我在 ion-slides 定义中放入 mode="xxx" ,它可以工作.. 倒置。如果我输入<ion-slides mode="ios">
,它可以在android设备上运行,但不能在 iPhone 上运行。反之亦然,如果我把<ion-slides mode="md">
它放在iPhone上而不是 android 上。这真的很奇怪。