angular - ion-slide funktioniert nicht mit ngFor-Direktive
[BEARBEITEN, neue Informationen am Ende des Beitrags]
In meiner App habe ich ein paar verschiedene Seiten mit einem ion-slides-Element. Sie funktionieren alle korrekt, außer einer, und ich habe es geschafft, die Spur bis zur *ngFor-Direktive zu verfolgen.
Dies ist der HTML-Code der Seite:
<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>
Der TypeScript-Code, der das "plafond"-Objekt füllt, ist:
const userdata = await this.authenticationService.getUser();
const plafond = await this.getPlafondData(userdata);
setTimeout(async() => {
this.userdata = userdata;
this.plafond = plafond;
}, 1500);
getPlafondData gibt ein Versprechen zurück, das korrekt aufgelöst wird, dies ist das JSON-Objekt, das ich erhalte:
[{"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}]
Dass ich mit jsonlint.io validiert habe. Es ist gültig. Wenn ich die *ngFor-Direktive nicht verwende, sondern 9 Folien mit der Notation plafond[index] erstelle, werden die Folien korrekt angezeigt und sind nutzbar.
Was wirklich seltsam ist, ist, dass ich auf einer anderen Seite der App diesen anderen Schieberegler habe:
<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>
Das funktioniert einwandfrei und bezieht Daten so ziemlich auf die gleiche Weise:
this.convenzionati = await this.helperService.lookUp(lookUpCriteria);
Ich habe mir in den letzten Tagen den Kopf darüber zerbrochen, ohne etwas Offensichtliches finden zu können.
Dies ist meine Ionic-Info-Ausgabe:
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
BEARBEITEN Ok, das ist noch seltsamer, als ich dachte. Wenn ich mode="xxx" in die Definition von ion-slides setze, funktioniert es… umgekehrt. Wenn ich <ion-slides mode="ios"> setze, funktioniert es auf Android-Geräten, aber nicht auf dem iPhone. Umgekehrt, wenn ich <ion-slides mode="md"> setze, funktioniert es auf iPhone und nicht auf Android. Das ist wirklich seltsam.