如何动态添加离子滑梯？答案

【问题标题】：How to add ion-slide dynamically?如何动态添加离子滑梯？
【发布时间】：2020-07-01 20:23:00
【问题描述】：

我在离子载玻片内使用离子网格。我想要实现的是 - 最多有 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 张，那么我想添加另一个包含下一组卡片的离子载玻片。

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

您可以将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>

【讨论】：

这听起来不错，虽然我将不得不对我的服务进行更改，还有其他解决方法吗？
也许您可以在将所有卡片添加到数组中后使用此示例中的函数 ourcodeworld.com/articles/read/278/… 进行拆分。这样您就不需要更改数组创建，并且您将在模板中循环使用数组数组。