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

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!

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
  }

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>