NativeScript: ListView not updating on Android

Hi all,

I’ve investigated this issue with the project from here and the problem is visible with the latest version (if you remove GridLayout that wraps the ListView control). However the problem comes from the fact that native Android ListView control gives a visual items in an unpredictable order (when placed in a container with an unspecified height like StackLayout). I’ll try to explain:

With the first tap on a button Add, one DataModel is added to the collection. The interesting part is what happens on the background. Since ListView.items collection is changed ListView should update its UI - therefore creates a new item (counter.component) for added DataModel instance. This view is new and its angular representation has not been checked and ngOnInit method is called after first check. Here code subscribes for its DataModel changes and update counter. So far so good. With the second tap, another DataModel is added to collection. Here ListView again is trying to update UI, so it is trying to create views for both items. Unfortunately due to (a little bit weird logic (imo)) inside native Android ListView recycling logic it creates a new view for DataModel at 0 (first) inside data.collection and this view is clean and angular calls ngOnInit for it again, so code again subscribes for changes of data.collection[0]. Most interesting part is that when creating view for data.collection[1] item Android ListView returns the view that was previously used for data.collection[0], but this view has been checked for changes and its ngOnInit is not called.

The solution is very simple just to be strict on MVVM pattern. As it turns out ngOnInit is part of the view part. I’ve made a fix for the problem - making subscription when input property model is changed. A sample code is worth a thousand words:

// counter.component.ts
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core";
import DataModel from '../../models/data.model';

@Component({
    moduleId: module.id,
    selector: "counter",
    templateUrl: "counter.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {

    private _model: DataModel;
    private modelChangeHandler: (args) => void = (args) => {
        this.cd.markForCheck();
    };

    @Input()
    set model(model: DataModel) {
        if (this._model) {
            this._model.off(DataModel.propertyChangeEvent, this.modelChangeHandler);
        }
        this._model = model;
        this._model.on(DataModel.propertyChangeEvent, this.modelChangeHandler);
    }
    get model() { return this._model; }
    
    constructor(private cd: ChangeDetectorRef) {
    }

    onTap() {
        this.model.increaseCounter();
    }
}