如何动态添加ion-slide？

Question

我在离子载玻片内使用离子网格。我想要实现的是 - 最多有 8 张卡片将放置在 2*2 离子网格上，这使得每个离子滑块上有一个 2*2 的离子网格。

但是卡片的数量不是固定的8张。我想当卡片长度超过4张时，再添加一张离子幻灯片，其余的卡片将继续进行第二张离子幻灯片。

这是我的 HTML 代码 -

<ion-slides pager>
  <ion-slide>
    <ion-grid>
      <ion-row>
        <ion-col *ngFor="let commodity of cardData" col-6>
          <ion-card
            class="animate__animated animate__flipInX"
            (click)="showDetails(commodity.CommodityId,commodity.CommodityCode)"
            [class.active]="selectedCard == commodity.CommodityId"
          >
            <ion-card-content>
              <ion-label class="header">{{commodity.CommodityCode}}</ion-label>
              <ion-item
                *ngFor="let month of commodity.Months_Data"
                class="cardContent"
              >
                <ion-label class="month">
                  {{month.Month}} : {{month.Trade_Quantity_2}} {{month.UOM}}
                  <ion-icon
                    name="{{month.Icon}}"
                    color="{{month.Icon == 'md-arrow-down'? 'danger' : 'MaterialGreen'}}"
                  ></ion-icon>
                </ion-label>
              </ion-item>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-slide>
</ion-slides>

目前看起来像这样

如果卡片超过 4 张，那么我想添加另一个包含下一组卡片的离子幻灯片。

Answer 1

您可以'split'将您的cardData数组转换成一个数组的数组，每个数组最多包含4张牌。然后在你的模板中你可以像下面的例子那样做

我假设你调用了数组 cardDatas

<ion-slides pager>
  <ion-slide *ngFor="let cardData of cardDatas">
    <ion-grid>
      <ion-row>
        <ion-col *ngFor="let commodity of cardData" col-6>
          <ion-card class="animate__animated animate__flipInX"
            (click)="showDetails(commodity.CommodityId,commodity.CommodityCode)"
            [class.active]="selectedCard == commodity.CommodityId">
            <ion-card-content>
              <ion-label class="header">{{commodity.CommodityCode}}</ion-label>
              <ion-item *ngFor="let month of commodity.Months_Data" class="cardContent">
                <ion-label class="month">
                  {{month.Month}} : {{month.Trade_Quantity_2}} {{month.UOM}} <ion-icon name="{{month.Icon}}"
                    color="{{month.Icon == 'md-arrow-down'? 'danger' : 'MaterialGreen'}}"></ion-icon>
                </ion-label>
              </ion-item>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-slide>
</ion-slides>

如何动态添加ion-slide？

How to add ion-slide dynamically?

angular

ionic-framework

ionic3