Re-render Nativescript ListView when ObservableArray item changes

Question

This is how I render the cases ObservableArray in my view

<ListView [items]="cases" class="list-group" *ngIf="cases">
    <ng-template let-case="item">

Say cases has these values:

cases = [{id: 1, name: "Sam"}, {id: 2, name: "Romio"}]

How can I get my ListView to re-render or somehow update the view when I update the first item like this?

cases[0]["name"] = "Michael"

AceTheFace · Accepted Answer · 2017-10-11 19:58:44Z

3

Have you tried to do apply the change in NgZone? I used this to update an array (not ObservableArray) and the corresponding RadListView automatically was updating.

this.ngZone.run(() => {

        this.dummyService.addFile(this.file).subscribe(
            (fileId) => {
                this.folder.push(this.file);
        },
        (error) => {
           this handleError(error);
        });
     });

answered Oct 11, 2017 at 19:58

AceTheFace

1354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mutaz Over a year ago

Yesss!! This is the answer, thank you. It works as I want it and with ListView. Although I don't get it why ngZone did the magic!

JoshSommer · Accepted Answer · 2017-10-11 16:29:57Z

0

You're going to want to enforce immutability here. So if you must mutate the first object in the array I would. I would try using the spread operator afterward.

cases[0]["name"] = "Michael"
cases = [...cases];

this will set cases to a new instance of an array which should update the list.

answered Oct 11, 2017 at 16:29

JoshSommer

2,60820 silver badges24 bronze badges

1 Comment

Mutaz Over a year ago

I already tried changing the instance but nativescript doesn't re-render the view when you do that until you hit something in the UI. Any action you do is sufficient to re-render. But just changing the instance itself is not enough. Instead of update, I also tried to keep the same instance, and remove the old object and add the new object to the array but with no success. Nothing is re-rendering the view until you do some action to the UI!

Collectives™ on Stack Overflow

Re-render Nativescript ListView when ObservableArray item changes

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related