Angular 如何动态添加离子幻灯片？

我在离子载玻片内使用离子网格。我想实现的是-最多有8张卡放置在

2*2

离子网格上，每个离子幻灯片上有一个

2*2

离子网格

但是卡片的数量并不是恒定的8张。当卡的长度超过4时，我想添加另一个离子幻灯片，其余的卡将进入第二个离子幻灯片

这是我的HTML代码-

{{商品.商品代码}
{{month.month}}:{{month.Trade_Quantity_2}}{{month.UOM}

现在看起来是这样的

---

如果卡多于4张，则我想添加另一张离子幻灯片，其中将包含下一组卡。

您可以将

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>

{{商品.商品代码}
{{month.month}}:{{month.Trade_Quantity_2}}{{month.UOM}

您可以将

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>

{{商品.商品代码}
{{month.month}}:{{month.Trade_Quantity_2}}{{month.UOM}

这听起来不错，尽管我必须对我的服务进行更改，但还有其他解决方法吗？也许您可以在将所有卡添加到阵列中后使用类似于本例的功能进行拆分。这样，您就不需要更改阵列创建，您的模板中将有一个要循环的阵列。这听起来不错，虽然我必须更改我的服务，但是否有其他解决方法？也许您可以在将所有卡添加到阵列中后使用类似于此示例的函数进行拆分。这样，您就不需要更改数组的创建，您就可以在模板中循环使用一个数组数组。