Data gets duplicated on screen when using *ngFor and <ion-item-group> in an <ion-list>

Ionic Framework
1

This is an Ionic-4 problem.

When using *ngFor inside an <ion-item> which is inside an <ion-list> – all works fine: items are enumerated properly.

But now when using the same *ngFor loop but inside of an <ion-item-sliding> (which is inside of an <ion-item-group> that in turn is inside an <ion-list>) the entire item group is repeated exactly twice, i.e. all items show up twice – with the same <ion-item-divider> and exactly the same content: once at the top of the content area and another time half way down, basiically the content area is split into two halves: a top half and a bottom half and the list appears exactly as it should, but twice - once in the top half and another in the bottom half.

This is very strange…

I tried going back to simple <ion-item> and no problem at all - works perfectly.

I also verified that my input to the template (the array entries in the *ngFor) is exactly what it should be - it is: the content is not duplicated in any way inside entries and entries is exactly what should it be, but its content is duplicated on the screen).

Here’s the relevant template code that did not work:

<ion-content *ngIf="directoryEntry.fullPath">
    <ion-grid size="fixed">
        <ion-list>
            <ion-item-group>
                <ion-item-divider sticky>
                    <ion-label>
                        In folder: {{ directoryEntry.fullPath | pathPipe }}
                    </ion-label>
                </ion-item-divider>
                <ion-item-sliding *ngFor="let entry of entries">
                    <ion-item ion-button detail="false"
                              (click)="onClickItem($event, entry)">
                        <ion-label>
                            <ion-row align-items-stretch>
                                <ion-col size="auto" align-self-center
                                         *ngIf="entry.selected">
                                    <ion-icon [name]="icon.selected">
                                    </ion-icon>
                                </ion-col>
                                <ion-col size="auto" align-self-center
                                         *ngIf="!entry.selected">
                                    <ion-icon [name]="icon.unselected">
                                    </ion-icon>
                                </ion-col>
                                <ion-col size="auto" align-self-center>
                                    <ion-icon [name]="entry.icon"></ion-icon>
                                </ion-col>
                                <ion-col size="9.7" align-self-center>
                                    {{ entry.displayName || entry.name }}
                                </ion-col>
                            </ion-row>
                        </ion-label>
                    </ion-item>
                    <ion-item-options side="end">
                        <ion-item-option>
                            <ion-icon name="md-create"></ion-icon>
                            &nbsp;
                            Rename
                        </ion-item-option>
                    </ion-item-options>
                </ion-item-sliding>
            </ion-item-group>
        </ion-list>
    </ion-grid>
</ion-content>

NOTE: for reference, here’s template code that did work when using simple items (instead of sliding items inside of an item group as above). The code above shows duplicate content, as described, but the code below does not:

<ion-content *ngIf="directoryEntry.fullPath">
    <ion-grid size="fixed">
        <ion-list>
           <ion-item *ngFor="let entry of entries"
                ion-button detail="false" 
                (click)="onClickItem($event, entry)">
                <ion-label>
                    <ion-row align-items-stretch>
                        <ion-col size="auto" align-self-center
                                 *ngIf="entry.selected">
                            <ion-icon [name]="icon.selected">
                            </ion-icon>
                        </ion-col>
                        <ion-col size="auto" align-self-center
                                 *ngIf="!entry.selected">
                            <ion-icon [name]="icon.unselected">
                            </ion-icon>
                        </ion-col>
                        <ion-col size="auto" align-self-center>
                            <ion-icon [name]="entry.icon"></ion-icon>
                        </ion-col>
                        <ion-col size="9.7" align-self-center>
                            {{ entry.displayName || entry.name }}
                        </ion-col>
                    </ion-row>
                </ion-label>
            </ion-item>
        </ion-list>
    </ion-grid>
</ion-content>

Has anybody seen a similar problem? Is this a bug in Ionic4?

Thanks for any leads!

2

A TEMPORARY HACK (sort of a solution, but not really): I removed the sticky HTML attribute: from <ion-item-divider sticky> to <ion-item-divider> and the data stopped from duplicating on the screen. No idea whether sticky is supposed to cause that, but this seems to have fixed the problem…

EDIT: I noticed new “double-vision / double-elements” at various *ngIf or *ngFor places in the app, when used in conjunction with <ion-list>. Here’s my ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v11.7.0 (/usr/bin/node)
   npm    : 6.7.0
   OS     : Linux 4.9
3

I’m having similar problem in ionic 4.

Did you managed to solve this??