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

Question

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

HTML Code

    <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" alt=""> -->
              <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
  }

Answer 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>

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

How to remove empty columns when fetching dynamic data in ion segments?

mysql

json

node.js

ionic-framework

ion-segment