Ionic 3 ion-slides не правильно выровнены друг с другом - PullRequest
Новая
       45

Ionic 3 ion-slides не правильно выровнены друг с другом

0 голосов
/ 25 июня 2019

Я пытаюсь сделать страницу сравнения продуктов в моем ионном приложении.Первый раздел должен быть основными заголовками спецификаций (имя, цена, оперативная память, ...).Поэтому я придумываю способ, используя несколько ion-slides внутри ion-slides, которые прекрасно работали до зацикливания массива продуктов.

Вот код: 

<div>
  <ion-slides slidesPerView="5">
    <ion-slides slidesPerView="1" class="slideWidth" >
      <ion-slide>
          <ion-item class="slide_height">
              <ion-label><b>Logo</b></ion-label>
            </ion-item>
        <ion-item>
          <ion-label><b>Product</b></ion-label>
        </ion-item>
        <ion-item>
          <ion-label><b>Company</b></ion-label>
        </ion-item>
        <ion-item>
          <ion-label><b>Price</b></ion-label>
        </ion-item>
        <ion-item>
          <ion-label><b>Discount</b></ion-label>
        </ion-item>
        <ion-item>
          <ion-label><b>Final Price</b></ion-label>
        </ion-item>

      </ion-slide>
    </ion-slides>
    <ion-slides slidesPerView="2" pager paginationType="progress">
      <ion-slide *ngFor="let offer of array; let i = index">
          <ion-item>
        <img class="brand_logo" [src]="url">
            </ion-item>
        <ion-item>
          <ion-label>{{offer.product}}</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>{{offer.cname}}</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>{{offer.price}} $</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>{{offer.discount}} %</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>{{offer.price-offer.price*(offer.discount)/100}} $</ion-label>
        </ion-item>

      </ion-slide>
    </ion-slides>
  </ion-slides>
  </div>

Вот stackblitz .ion-items плохо выровнены друг с другом, между основным исправлением ion-slide и другими, сгенерированными в цикле for.

...