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>