ion-slide не работает с директивой ngFor - PullRequest
Новая
       7

ion-slide не работает с директивой ngFor

0 голосов
/ 01 апреля 2020

[РЕДАКТИРОВАТЬ, новая информация внизу поста]

В моем приложении у меня есть несколько разных страниц с элементом 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": 1008 * 

        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, но создаю 9 слайдов, используя плафон нотации [index], слайды будут правильно отображаться и использоваться.

Что действительно странно, так это то, что на другой странице приложения я ve этот другой слайдер: 

<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);

Я уже несколько дней бьюсь об этом без возможность найти что-то очевидное.

Это мой информационный вывод c: 

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

РЕДАКТИРОВАТЬ Хорошо, это даже более странно, чем я думал. Если я добавлю mode = "xxx" в определение ионных слайдов, оно будет работать ... перевернуто. Если я поставлю <ion-slides mode="ios">, он будет работать на устройствах android, но не на iPhone. Viceversa, если я поставлю <ion-slides mode="md">, он будет работать на iPhone, а не на android. Это действительно странно.

...