2

[编辑,帖子底部的新信息]

在我的应用程序中,我有几个不同的页面,其中包含一个 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 上。这真的很奇怪。

4

0 回答 0