Seperate ion-list

#1

guys how to seperate ion-list.?
when i update my database i add march data then this is the result.
any idea?tnx in advance. :slight_smile:

this is my code

html:

ion-list
ion-item text-wrap *ngFor=“let item of bethData”
h1 class=“month”>{{item.birth_month}}</h1
/ion-item

    <ion-item text-wrap *ngFor="let item of bethData">
        <ion-thumbnail item-left>
            <img src={{item.birth_img}}>
        </ion-thumbnail>
        <h2>{{item.birth_name}}</h2>
        <p>{{item.birth_date}}</p>
    </ion-item>
</ion-list>
#2

The issue is that you have two ngFor loops that in your case act independently. Meaning you can add March and the month will display accordingly.
What you probably want is something like:

` <ion-list *ngFor=“let item of bethData”>

{{item.birth_month}}

{{item.birth_name}}

{{item.birth_date}}

`
#3

bro it helps me to seperate but i have another problem.
i follow ur code and this is the result.

html:
ion-list *ngFor=“let item of bethData”
ion-item text-wrap
h1 class=“month”>{{item.birth_month}}</h1
/ion-item

    <ion-item text-wrap>
        <ion-thumbnail item-left>
            <img src={{item.birth_img}}>
        </ion-thumbnail>
        <h2>{{item.birth_name}}</h2>
        <p>{{item.birth_date}}</p>
    </ion-item>
</ion-list>

database:

#4

Whats the issue? You have a blank birth_month field in your data.

#5

yeah but how to make it like this??
any idea bro?

#6

It all really depends on how you are going to structure your beth_data array. You’ll probably end up with something like this:
[ {image: ..., month: ..., sub-data: [{date: ..., name: ....}, {date: ..., name: ....}]}, {image: ..., month: ..., sub-data: [{date: ..., name: ....}, {date: ..., name: ....}]}]

That way you can loop through the sub-data array with in the month.