Costum Pipe делает изображение бесконечной петлей (мигает)

Question

У меня есть некоторые данные, которые нужно показать, и данные выглядят так:

https://drive.google.com/open?id=1Od-QC4xpfXXH4UgKDPkhkB90DQMUDAhV

Код:

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

, и изображение на самом деле продолжает отображаться из-занестандартная труба.

Как я могу остановить цикл?

Я использую как groupby трубу.Но если я не использую пользовательскую трубу, она работает хорошо.

А это мои groupby трубы:

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] 

}));

Answer 1

Старайтесь избегать дублирования имен объектов.Вы используете content дважды.Может быть, это главная проблема здесь.Я заменил его на element.Пожалуйста, проверьте.

<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 element of item.value | slice:0:limit; let i=index">
                <img (click)="goView(element)" src="{{element.thumbnail_image}}" />
            </ion-col>
        </ion-row>
</ion-grid>