Multiple ngFor into ionic list, duplicate informations


#1

Hi!
In my page I have an Avatar list (from the ionic tutorial) where I want to show my database informations. I need to use two ngFor (one for the description and one for the data), but the result of my code it’s a duplicated list (if I have 3 entries from the query, all the informations are duplicated for 3, if I have 4, duplicated for 4 etc…).
This is what I obtain:

This is what I want to achieve:
Senza titolo 2

This is my code:

 <ion-list >
         <div *ngFor="let elenco of achievements_INFO;">
                  <div *ngFor="let data of achievements_INFO_data;">
                    <ion-item >
                      <ion-avatar item-start>
                        <ion-icon name="chatboxes" style="font-size: 50px"></ion-icon>
                      </ion-avatar>
                      <h3 text-wrap >{{elenco}}</h3>
                      <p >{{data | date: 'dd/MM/yyyy'}}</p>
                    </ion-item>
                  </div>
                </div>
 </ion-list>

I don’t know how to make it works. I saw that someone use <template>, I tried it but nothing worked! How can I fix it?


#2

I think the best way to do that is to assing data properties to each elenco on controller. Or you can use ngIf on ion-item to just show the data of the user that ngFor is going through.