Nativescript: Problem with listview not refreshing when updating observable

[davecoffin]

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):
  ```"dependencies": {
  "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 = 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:

```

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

[tsonevn]

HI, @davecoffin,
I tested the described problem, however, was unable to reproduce this behavior on my side, while using latest NativeScript version 3.2.1. I am attaching GIF file from the simulator and a sample project, which you could review and make the needed changes, which will help me to debug the problem.
Archive.zip

[davecoffin]

Hey there, I ran your project and it works. Serendipitously, I randomly stumbled across this: https://github.com/EddyVerbruggen/nativescript-listview-backgroundcolor-changedetection-issue

notice the changes he made to core to get this resolved:
https://github.com/EddyVerbruggen/nativescript-listview-backgroundcolor-changedetection-issue/compare/fix

@EddyVerbruggen did you ever get a confirmation from the core team?

[EddyVerbruggen]

Hey @davecoffin, that issue was flagged as a duplicate of https://github.com/NativeScript/nativescript-angular/issues/377, that's all I've heard. By the way, the slice trick in metioned in that issue works for me.

[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.

[NickIliev]

Closing this issue as related to https://github.com/NativeScript/nativescript-angular/issues/377

[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();

[nileshmean]

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();

Not working for me can you please describe more for refresh?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.