Changing item data on iOS within virtual scroll doesn't render

Ionic Framework ionic-v3
1

Hi,

Apologies for how i’m going to try and explain this but I am using a virtual scroll to list contacts and on press the ngClass of an icon changes the state of the contact from unselected to selected.

Has anyone else had a problem where on press you have to scroll a little first to get the ngClass change? I have noticed this also happens when I use a checkbox.

I also have a modal that pops up when you press another button on the contact to show more information about the contact and this also has img icons using ngClass to set selected/unselected and this also doesn’t work. However if my contact is near the top e.g. with an ‘A’ surname both the modal and select icons work fine.

Thanks in advance a bit of code below

<ion-item *virtualItem="let contact">
        <h3 item-start>{{contact.firstname}} {{contact.lastname}}</h3>
        <div (click)="select(contact)" class="statusIcon" [ngClass]="{'selected': contact.selected}" item-end></div>
    </ion-item>

select(contact){
      if(contact.selected === true){
        contact.selected = false;
      } else {
        contact.selected = true;
      }
}
2

Just as a note on this, it does seem to be that either ngIf or ngClass isn’t working when a property value changes. Selected does get set to true, it just doesn’t apply the visual change until you scroll again

3

it’s also exclusive to iOS