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