I have some data that needs to be displayed and it looks like this:
https://drive.google.com/open?id=1Od-QC4xpfXXH4UgKDPkhkB90DQMUDAhV
Here is the code snippet:
<ion-grid *ngFor="let item of content | sortprogram: 'month'">
<ion-item>{{item.key}}</ion-item>
<ion-row>
<ion-col col-3 col-md-4 col-xl-12 *ngFor="let content of item.value | slice:0:limit; let i=index">
<img (click)="goView(content)" src="{{content.thumbnail_image}}" />
</ion-col>
</ion-row>
</ion-grid>
The issue I'm facing is that it keeps looping on images due to a custom pipe.
How can I prevent this endless looping?
I am using a groupby pipe. However, when I remove the custom pipe, everything works fine.
Below are my groupby pipes:
transform(value: Array<any>, field: string): Array<any>{
if(!value || !value.length) { return value; }
const groupedObj = value.reduce((prev, cur)=> {
if(!prev[cur[field]]) {
prev[cur[field]] = [cur];
} else {
prev[cur[field]].push(cur);
} return prev;
}, {});
return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key]
}));