Change detection issue in ListView

[ignaciofuentes]

Conditional styling in ListView templates don't get consistently applied. Most times they require the item to go off screen and back in, in order for the new status to be reflected.

Gif

Here is a sample to reproduce:

Component:

import {Component} from "@angular/core";
@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public options: string[] = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

    public selectedOption: string = "";

    public onItemTap(args) {
        this.selectedOption = this.options[args.index];
    }
}

Markup:

<StackLayout>
<ListView #listview [items]="options" separatorColor="white" (itemTap)="onItemTap($event)">
    <template let-item="item" let-i="index" let-odd="odd" let-even="even">
        <GridLayout columns="44, *" height="48">
            <StackLayout colSpan="2" verticalAlignment="bottom" class="line"></StackLayout>      
            <Label col="1" [text]="item" style="font-size:20" [class.active]="selectedOption == item"></Label>
        </GridLayout>
    </template>
</ListView>
</StackLayout>

CSS

.active {
    color:red;
}

[vakrilov]

It looks like a change detection issue. The list-view has OnPush change detection strategy (for performance reasons). Probably, thats why the items in it are note updated when selectedOption is changed.

One thing I noticed that if you use tap listener on the grid inside the template - it works as expected:

<GridLayout height="48" (tap)="selectedOption = item">

In this case, because the event is executed in the actual item - it triggers its change detector.

[jzgoda]

I ran into a very similar issue, but adding a (tap) wasn't possible in my case.

However, I did solve it by changing the instance variable type to BehaviorSubject, and using the async pipe in the template.

[eduardoturconi]

I am having the same issue, having a class toggled by an item's property (in a list-view).
Is there a way to manually trigger change detector for an item? In my case the property is changed after a request to an API, so I can't do the change in the layout.

[eleddie]

Even though your problem is a little bit strange, you could try this:

import { Component, NgZone } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public options: string[] = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

    constructor(private zone: NgZone) { }

    public selectedOption: string = "";

    public onItemTap(args) {
        this.zone.run(() => {
               this.selectedOption = this.options[args.index];
        });
    }
}

Once I had a problem like that and I fixed it by running the code inside the NgZone.

[eduardoturconi]

Trying with NgZone didn't work for me.
With RadListView, changing an item's property updates immediately the UI, but since it has a memory leak (an issue was created on telerik/nativescript-ui-feedback) and kills my app after a while, I can't use it.
With ListView, the UI is not updated. Is there any alternative to NgZone that could work?

[eduardoturconi]

After trying some modifications to my code, I could solve this issue by doing:

...
this.items[i].is_list = true;
this.items = this.items.slice();

That way, when reassigning to this.items it's own array, the UI got updated.

[enissay14]

Same problem. Thanks @eduardoturconi , that worked for me.

[davecoffin]

Worth noting: This isnt just on angular, I am experiencing this in a Typescript/vanilla app. I fix it by calling refresh() on the listview, though that shouldnt be necessary.

[erkanarslan]

This happens only on iOS, works correctly on Android.