Nativescript listview disable components reusing

0
votes

I have a ListView of custom components that receive a boolean @Input() property which is responsible of displaying some parts of the template.

This is the ListView :

<ListView [items]="photos">
    <ng-template let-item="item">
        <app-post [photo]="item" [displayInfo]="display"></app-post>
    </ng-template>
</ListView>

The display variable is set to false.

And this is the app-post template :

<StackLayout *ngIf="displayInfo" verticalAlignment="center">
....            
</StackLayout>

Where displayInfo is the input property. Inside the app-post component I have logic that changes the displayInfo value to true. I noticed however that the ListView only creates a couple of components and than reuses them as scrolling down. This causes the following (example) scenario :

  1. List of 5 app-post components, all with displayInfo to false
  2. Click on 1st app-post component sets displayInfo to true
  3. 3d and 5th app-post components have already displayInfo set to true

How can I avoid this behaviour and have all custom components with the property set to the value specified with in the listview?

1
nativescriptangular2-nativescript

1 Answers

0
votes

The NativeScript ListView is virtualized and is using recycling for its cells which are causing your issue as you are expecting the custom components to be as originally created in your list while, in fact, they are part of list cells that are being reused.

The solution is to introduce the displayInfo boolean as a part of your items model. Here is a similar solution explained for TypeScript project but the very same concept could be used in Angular based project