Problem with listview not refreshing when updating observable

Did you verify this is a real problem by searching [Stack Overflow]

There are a lot of ListView issues that are similar, but not the same.

Tell us about the problem

I have a ListView whose data is of type: public invoices: ObservableArray<Observable> = new ObservableArray([]); When updating properties in the observable, all works well except some changes do not take effect until you scroll the item out of view and back into view. The text updates, but I have a “tag” whose backgrounds depend on a property in the observable, and the background isnt updated until the item is scrolled out of view and back into view.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 3.2.0
• Cross-platform modules: 3.2.0
• Runtime(s): 3.2.0
• Plugin(s):

    "moment": "^2.18.1",
    "nativescript-iqkeyboardmanager": "^1.1.0",
    "nativescript-plugin-firebase": "^4.0.6",
    "nativescript-pulltorefresh": "^2.0.2",
    "nativescript-taptic-engine": "^2.0.3",
    "nativescript-telerik-ui": "^3.1.0",
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "^3.2.0",
    "tns-platform-declarations": "^3.0.0"
  }

Please tell us how to recreate the issue in as much detail as possible.

Create a list view with observables, and try to change the visual property of a listview item by changing a property in the observable.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

import {EventData, Observable, PropertyChangeData, fromObject as observableFromObject} from 'data/observable';


public invoices: ObservableArray<Observable> = new ObservableArray([]);


for (var i in invoicesFromServer) { // these objects include a property called "paid" which is true or false
  this.invoices.push(observableFromObject(invoicesFromServer[i]));
}

public setAsPaid (args) {
  let invoice = this.invoices.getItem(args.index);
  invoice.set('loading', true);
  shiftService.updateInvoice(invoice.get('id'), {paid: true}).then(result => {
    invoice.set('loading', false);
    invoice.set('paid', true);
  })
}

and my listview xml:

<ListView items="{{ invoices }}" row="1" itemTap="{{invoiceOptions}}" height="100%" separatorColor="transparent" style="background-color: transparent; height: 100%;" visibility="{{ invoices && invoices.length ? 'visible' : 'collapsed' }}">
        <ListView.itemTemplate>
            <GridLayout class="invoice_item" columns="*, 90, 30">
                <StackLayout>
                    <Label text="{{family_name}}" class="invoice_header"></Label>
                    <Label text="{{'Created on ' + date_created_pretty}}" class="invoice_subheader"></Label>
                    <StackLayout orientation="horizontal">
                        <Label text="{{sent ? 'SENT' : 'NOT SENT'}}" width="70" class="{{sent ? 'tag sent_tag' : 'tag notsent_tag'}}" style="text-align: center;"></Label>
                        <Label text="{{paid ? 'PAID' : 'UNPAID'}}" width="70" class="{{paid ? 'tag paid_tag' : 'tag unpaid_tag'}}" style="text-align: center;"></Label>
                    </StackLayout>
                </StackLayout>
                <Label col="1" text="{{'$' + total}}"></Label>
                <Label col="2" text="&#xf054;" class="fa" horizontalAlignment="right" visibility="{{ loading ? 'collapsed' : 'visible' }}" marginRight="5" style="color: #6700be;"></Label>
                <ActivityIndicator col="2" color="#6700be" busy="{{loading}}" marginRight="5" horizontalAlignment="right" />
            </GridLayout>
        </ListView.itemTemplate>
    </ListView>

You can see this bug in action here: https://cl.ly/mTRs

[divyachandana]

Refresh radlistview nativescript on updating data radlistview refresh <RadListView #myListView></RadListView>

@ViewChild("myListView") listViewComponent: RadListViewComponent; //use this whenever you update data in dataItems this.listViewComponent.listView.refresh();

[tsonevn]

HI @davecoffin , @EddyVerbruggen, Issue #377 is still under review. We will investigate it and will provide further info on it.

In addition @davecoffin It would help if you could provide a sample where the problem could be recreated in NativeScript TypeScript project. At this time, the update is working as expected on my side.