fix(list-view-android): app crashes on ListView item template change (#6634)

* fix(list-view): app crashes on first ListView item template change

* tests: add tests for changing ListView item template with expression

apps/app/ui-tests-app/list-view/dynamic-templates.ts

@@ -0,0 +1,21 @@
+import { Page } from "tns-core-modules/ui/page";
+import { ViewModel } from "./main-view-model";
+
+export function pageLoaded(args) {
+    let page = <Page>args.object;
+    const viewModel = new ViewModel();
+
+    page.bindingContext = {
+        "items": viewModel.items
+    }
+}
+
+exports.onItemTap = function (args) {
+    const list = args.object;
+    let index = args.index;
+    let listArray = list.page.bindingContext["items"];
+    let currentItem = listArray.getItem(index);
+
+    currentItem.age = currentItem.age + 1;
+    listArray.setItem(index, currentItem);
+}

apps/app/ui-tests-app/list-view/dynamic-templates.xml

@@ -0,0 +1,14 @@
+<Page loaded="pageLoaded">
+    <GridLayout id="grid-layout">
+        <ListView id="lv1" items="{{ items }}" itemTemplateSelector="age % 2 === 0 ? 'green':'red'" itemTap="onItemTap">
+            <ListView.itemTemplates>
+                <template key="red">
+                    <Label text="{{ name + ' ' + id }}" style.backgroundColor="red"/>
+                </template>
+                <template key="green">
+                    <Label text="{{  name + ' ' + id }}" style.backgroundColor="green"/>
+                </template>
+            </ListView.itemTemplates>
+        </ListView>
+    </GridLayout>
+</Page>

apps/app/ui-tests-app/list-view/main-page.ts

@@ -13,6 +13,7 @@ export function loadExamples() {
     const examples = new Map<string, string>();    
     examples.set("list-view-templates", "list-view/list-view");
     examples.set("images-template", "list-view/images-template");
+    examples.set("dynamic-templates", "list-view/dynamic-templates");
     examples.set("bindings", "list-view/listview-binding");
     examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color");
     examples.set("csslv", "list-view/csslv");

apps/app/ui-tests-app/list-view/main-view-model.ts

@@ -4,11 +4,13 @@ import { ObservableArray } from "tns-core-modules/data/observable-array";
 export class Item extends Observable {
   private _name: string;
   private _id: number;
+  private _age: number;
 
-  constructor(name: string, id: number) {
+  constructor(name: string, id: number, age: number) {
     super();
     this._name = name;
     this._id = id;
+    this._age = age;
   }
 
   get name(): string {
@@ -33,6 +35,17 @@ export class Item extends Observable {
     }
   }
 
+  get age(): number {
+    return this._age;
+  }
+
+  set age(value: number) {
+    if (this._age !== value) {
+      this._age = value;
+      this.notifyPropertyChange("age", value)
+    }
+  }
+
   public toString() {
     return `${this.name} ${this.id}`;
   }
@@ -44,7 +57,7 @@ export class ViewModel extends Observable {
   get items(): ObservableArray<Item> {
     this._items = new ObservableArray<Item>();
     for (let i = 0; i < 100; i++) {
-      this._items.push(new Item(`Item`, i));
+      this._items.push(new Item(`Item`, i, 0));
     }
     return this._items;
   }

tns-core-modules/ui/list-view/list-view-common.ts

@@ -66,6 +66,11 @@ export abstract class ListViewBase extends ContainerView implements ListViewDefi
             });
             this._itemTemplateSelector = (item: any, index: number, items: any) => {
                 item["$index"] = index;
+
+                if (this._itemTemplateSelectorBindable.bindingContext === item) {
+                    this._itemTemplateSelectorBindable.bindingContext = null;
+                }
+
                 this._itemTemplateSelectorBindable.bindingContext = item;
                 return this._itemTemplateSelectorBindable.get("templateKey");
             };