Change detection issue in ListView

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;
}

[erkanarslan]

This happens only on iOS, works correctly on Android.

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