在离子段中获取动态数据时如何删除空列？

Posted 2023-02-24

【中文标题】在离子段中获取动态数据时如何删除空列？

【英文标题】：How to remove empty columns when fetching dynamic data in ion segments?

【发布时间】：2021-09-19 17:12:20

【问题描述】：

每当我使用 Ng 在 ion-segment 中动态获取数据时，第一段（即“ALL”）中的数据都会被适当地获取，但在我的剩余段中，空列与项目一起显示。假设如果我在第一段（所有类别）中获取 5 项，在第二段中获取 3 项，我将获得额外的 2 列以及这 3 项。请检查屏幕截图和代码。两天以来我一直陷入困境，请帮助！

html 代码

    <ion-content class="content">
  <ion-refresher
    slot="fixed"
    pullFactor="0.5"
    pullMin="100"
    pullMax="200"
    (ionRefresh)="doRefresh($event)"
  >
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <ion-segment scrollable mode="md" [(ngModel)]="selectedIndex">
    <ion-segment-button (click)="changeMenu(0)" [value]="0">
      See All
    </ion-segment-button>
    <ion-segment-button
      *ngFor="let subcategory of data"
      (click)="changeMenu(subcategory.idsubcategory)"
      [value]="subcategory.idsubcategory"
    >
      subcategory.subcategory_name
    </ion-segment-button>
  </ion-segment>

  <div class="category-block">
    <ion-grid>
      <ion-row>
        <ion-col
          [ngSwitch]="selectedIndex"
          *ngFor="let product of datap"
          style="border: solid #d6d6d6; border-width: thin"
          sizeLg="4"
          sizeMd="4"
          sizeXs="6"
          class="lines"
        >
          <ion-row *ngSwitchCase="0">
            <ion-col (click)="showrate(product.idproduct)">
              <!-- <img src="../../assets/sub1.jpg" > -->
              <ion-img
                class="prodimg"
                src="product.product_image"
              ></ion-img>
            </ion-col>

            <ion-col size="12">
              <ion-label class="text">  product.product_name  </ion-label>
              <ion-label color="secondary">
                <h5 style="color: red">₹ product.product_price </h5>
              </ion-label>
            </ion-col>

            <ion-col size="6">
              <ion-button
                (click)="addToCart(product)"
                fill="outline"
                size="small"
              >
                <ion-icon
                  color="primary"
                  slot="icon-only"
                  name="cart"
                ></ion-icon>
              </ion-button>
            </ion-col>

            <ion-col size="6" class="ion-text-right">
              <ion-button fill="outline" size="small">
                <ion-icon
                  color="danger"
                  slot="icon-only"
                  name="heart-outline"
                ></ion-icon>
              </ion-button>
            </ion-col>
          </ion-row>
          <ion-row *ngSwitchCase="product.product_idsubcategory">
            <div>
              <ion-col (click)="showrate(product.id)">
                <ion-img
                  class="prodimg"
                  src="product.product_image"
                ></ion-img>
              </ion-col>
              <ion-col size="12">
                <ion-label class="text">  product.product_name  </ion-label>
                <ion-label color="secondary">
                  <h5 style="color: red">₹ product.product_price </h5>
                </ion-label>
              </ion-col>
              <ion-col size="6">
                <ion-button
                  (click)="addToCart(product)"
                  fill="outline"
                  size="small"
                >
                  <ion-icon
                    color="primary"
                    slot="icon-only"
                    name="cart"
                  ></ion-icon>
                </ion-button>
              </ion-col>
              <ion-col size="6" class="ion-text-right">
                <ion-button fill="outline" size="small">
                  <ion-icon
                    color="danger"
                    slot="icon-only"
                    name="heart-outline"
                  ></ion-icon>
                </ion-button>
              </ion-col>
            </div>
          </ion-row>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

.TS

selectedIndex= 0;

changeMenu(index:number)
    this.selectedIndex=index
  

【参考方案1】：

首先，我稍微重写了你的例子。

带有示例数据的component.ts：

selectedIndex: number = 0;
data = [
     idsubcategory: 1, subcategory_name: 'cat 1' ,
     idsubcategory: 2, subcategory_name: 'cat 2' ,
     idsubcategory: 3, subcategory_name: 'cat 3' 
];

datap = [
     idsubcategory: 1, product_name: 'product 1' ,
     idsubcategory: 2, product_name: 'product 2' ,
     idsubcategory: 3, product_name: 'product 3' ,
     idsubcategory: 1, product_name: 'product 4' ,
     idsubcategory: 2, product_name: 'product 5' ,
     idsubcategory: 3, product_name: 'product 6' ,
     idsubcategory: 1, product_name: 'product 7' ,
     idsubcategory: 2, product_name: 'product 8' 
];

changeMenu(index: number) 
    this.selectedIndex = index;

还有我们的ion-grid：

<ion-grid>
    <ion-row>
        <ion-col [ngSwitch]="selectedIndex" *ngFor="let product of datap"
            sizeLg="4" sizeMd="4" sizeXs="6" class="lines" >
            <ion-row *ngSwitchCase="0">
                 product.product_name 
            </ion-row>

            <ion-row *ngSwitchCase="product.idsubcategory">
                 product.product_name 
            </ion-row>
        </ion-col>
    </ion-row>
</ion-grid>

问题是创建空的ion-col 元素。如果子类别的 id 不等于 0 或 selectedIndex，则您有一个 *ngFor 循环创建空 ion-col。

我们可以像这样创建只需要的ion-col 元素：

<ion-grid>
    <ion-row>
        <ng-container *ngFor="let product of datap">
            <ion-col *ngIf="selectedIndex == 0" sizeLg="4" sizeMd="4" sizeXs="6" >
                <ion-row>
                     product.product_name 
                </ion-row>
            </ion-col>

            <ion-col *ngIf="selectedIndex == product.idsubcategory" sizeLg="4" sizeMd="4" sizeXs="6" >
                <ion-row>
                     product.product_name 
                </ion-row>
            </ion-col>
        </ng-container>
    </ion-row>
</ion-grid>