离子3离子滑片未正确对齐

Question

我正在尝试在离子应用程序中创建一个产品比较页面。第一部分应该是主要的规格标题（名称，价格，内存等）。因此，我想出了一种在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循环中生成的其他修订之间彼此之间的对齐方式不太好。