Data Multiplies Whenever Page Loads

@mhtchong wrote:

Hi,

I have an issue wherein everytime I load this particular page the data is being looped again, resulting to multiple duplicates. I have a nested arrays.

Here is the code snippet:

HTML:

<div *ngFor="let item of items">

		<ion-list>

			<ion-item  class="item-divider">{{ item.valid_from | date: 'MMMM d, y' }} - {{ item.valid_to | date: 'MMMM d, y'}}</ion-item>
			<div *ngFor="let detail of item.details">

		    <ion-item  (click)="showDetails(detail.expenses_savings_id)">
		      	<h2>{{ detail.title }}</h2>
		      	<p>{{ detail.amount | number:'.2-2' }}</p>
		      	<p class="time-ago" item-end>Spent {{ detail.datetime | timeAgo }}</p>
		    </ion-item>

			</div>
	  	</ion-list>

	  	</div>

TS file:

ionViewWillEnter() {

    //this.getPastExpenses();
    this.getPastExpensesSavings();
}

In the code above, there are two *ngFor. Once the page loads it works fine, but once I leave and re-enter the same page the second *ngFor will trigger again, resulting into double the data printed on the list.

Ive tested this by removing one *ngFor and it works fine.

Is there something I’ve missed?

Posts: 1

Participants: 1

Read full topic