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>

Costum Pipe使图像无休止地循环（闪烁）

1 个答案: