Nativescript Listview Components Reusal


#1

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?