How to fix problem with *ngFor in Ionic v3?

Question

I have a problem with use *ngFor in Ionic v3.

  <ion-list>
    <ion-item-group [reorder]="reorder" (ionItemReorder)="recordTracks($event)">
      <ion-item no-padding class="nomarg" *ngFor="let track of viewTracks$ | async; let i = index; trackBy: track?.TrackID">
        <ion-row class="track-name" [class.active]="isTrackPlaying(track)" (click)="openTrack($event, track)"
          (contextmenu)="onRightClick($event,track)">
          <ng-container>
            <ion-col tappable class="track-cell">
              {{ track.name }}
            </ion-col>
            <ion-col tappable class="track-cell">
              {{ track.artist }}
            </ion-col>
            <ion-col tappable class="track-cell">
              {{ track.album }}
            </ion-col>
            <ion-col *ngIf="isSelectTrackEnabled" col-1 text-center class="track-cell">
              <ion-checkbox class="chkbx" [(ngModel)]="track.chk" id="track.chk" color="primary"></ion-checkbox>
            </ion-col>
          </ng-container>
        </ion-row>
      </ion-item>
    </ion-item-group>
  </ion-list>

The first time the data in the template is displayed correctly. When viewTracks$ is updated, the data is displayed in the console but it is not in the template. Data is displayed during the update if you replace ion-item with a div.

whats the purpose of the nested ng-container? what do you mean by when viewTracks$ is updated? Can you provide a reproduction of your issue in stackblitz? — Jota.Toledo
@Jota.Toledo I use ng-container to output multiple DOM elements at the same hierarchy level. viewTracks$ is an Observable object. AsyncPipe tracks viewTracks$ and returns the value obtained from this object. Upon receipt of a value, AsyncPipe signals to the component that the changes should be checked. — user12093954
seems to be working fine: stackblitz.com/edit/ionic-n4ys1h?file=pages/home/home.ts Please provide a minimal reproducible example! — AT82
@AJT82 Thanks for your reply. In your example, if you add "isSelectTrackEnabled = true;" to the HomePage component class all data in the template disappears. Can this problem be solved? Thanks in advance. — user12093954
what is isSelectTrackEnabled supposed to do? Anyway, if you need such a variable, it needs to be unique for all items. — AT82

1antares1 1antares1 · Accepted Answer · 2019-09-24T22:02:04

@Pave Sergeev Try this (ng-container instead of ion-item - avoid having to create that extra div)

<ion-list>
 <ion-item-group [reorder]="reorder" (ionItemReorder)="recordTracks($event)">
  <ng-container *ngFor="let track of viewTracks$ | async; let i = index; trackBy: track?.TrackID">
    <ion-item no-padding class="nomarg">
      <ion-row class="track-name" [class.active]="isTrackPlaying(track)" (click)="openTrack($event, track)"
        (contextmenu)="onRightClick($event,track)">
          <ion-col tappable class="track-cell">
            {{ track.name }}
          </ion-col>
          <ion-col tappable class="track-cell">
            {{ track.artist }}
          </ion-col>
          <ion-col tappable class="track-cell">
            {{ track.album }}
          </ion-col>
          <ion-col *ngIf="isSelectTrackEnabled" col-1 text-center class="track-cell">
            <ion-checkbox class="chkbx" [(ngModel)]="track.chk" id="track.chk" color="primary"></ion-checkbox>
          </ion-col>
      </ion-row>
    </ion-item>
  </ng-container>
 </ion-item-group>
</ion-list>

As you can see, the ng-container directive provides us with an element that we can attach a structural directive to a section of the page, without having to create an extra element just for that.

Link reference: ng-container to the rescue

-Best regards.

How to fix problem with *ngFor in Ionic v3?

1 Answers