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

Issue

Whenever I am fetching data dynamically in ion-segment using Ng, the data in the first segment ie “ALL” is being appropriately fetched but in my remaining segments, empty columns are being displayed along with items. Suppose if I am fetching 5 items in my first segment (all category) and 3 items in the second segment, I am getting additional 2 columns empty along with those 3 items. Please check the screenshot and code. I am stuck in this since two days, pls help!

enter image description here

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.selectedIndexindex
  }

Solution

First of all, I re-wrote your example a little bit.

component.ts with sample data:

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;
}

And our 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>

The problem is creating empty ion-col elements. You have a *ngFor cycle which creates empty ion-col if the id of subcategory is not equal 0 or selectedIndex.

We can create only needed ion-col elements like this:

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

Answered By – Danil Prokhorenko

Leave a Comment