Listcrash on Android 4.4.4 with Angular2 + Typescript

[tsonevn]

From @SjurWarEagle on June 11, 2016 20:4

Hey,

I have problems with a very simple list:

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

@component({
selector: "my-app",
template: <StackLayout> <Label [text]="'Upcoming Movies'"></Label> <ListView [items]="myItems"> <template let-item="item"> <GridLayout rows="*,auto" > <Label col="0" row="0" [text]="item.title"></Label> <Label col="0" row="1" [text]="'Dummy Test, so something is in this place.'"></Label> </GridLayout> </template> </ListView> </StackLayout>,
})
export class AppComponent implements OnInit{
private myItems:Array = [];

ngOnInit() {
    for (var i:number = 0; i < 100; i++) {
        this.myItems.push(new MovieInfo('Title ' + i));
    }
}

}

class MovieInfo {
constructor(public title: String) {}
}
`

this crashes after some up and down-sliding:

JS: ListView.onItemLoading: 20 - Reusing exisiting view
JS: ListView.onItemLoading: 21 - Reusing exisiting view
JS: ListView.onItemLoading: 22 - Reusing exisiting view
JS: ListView.onItemLoading: 23 - Reusing exisiting view
JS: ListView.onItemLoading: 24 - Reusing exisiting view
JS: ListView.onItemLoading: 25 - Reusing exisiting view
JS: ListView.onItemLoading: 26 - Reusing exisiting view
I/DEBUG ( 156): #2 pc 0024a377 /data/app-lib/org.nativescript.ListCrash-1/libNativeScript.so (Java_com_tns_Runtime_callJSMethodNative+231)
I/DEBUG ( 156): bff343a4 9494af31 /data/app-lib/org.nativescript.ListCrash-1/libNativeScript.so (tns::Runtime::CallJSMethodNative(JNIEnv, jobject, int, jstring, int, unsigned char, jobjectArray)+17)
I/DEBUG ( 156): bff343b8 94946378 /data/app-lib/org.nativescript.ListCrash-1/libNativeScript.so (Java_com_tns_Runtime_callJSMethodNative+232)

the crash happens in Genymotion and Android emulator, tested with Android 4.4.4, API 19

Until now, this didn't happen on my S6 real device and never on an emulated API 23, but this is the only device I can test on, so I cannot tell, if it also happens on a real 4.4.4 :(

Copied from original issue: NativeScript/NativeScript#2293

[tsonevn]

Hi @SjurWarEagle,

Thank you for reporting this issue,

I reviewed you problem and however I was unable to reproduce this issue. Can you tell me more about the given abnormality or sent us a simple project which shows the problem.

In addition you could review my sample project below:
app.component.html

 <StackLayout> 
     <Label [text]="'Upcoming Movies'"></Label> 
     <ListView [items]="myItems"> 
         <template let-item="item"> 
             <GridLayout rows="*,auto" > 
                 <Label col="0" row="0" [text]="item.title"></Label> 
                 <Label col="0" row="1" [text]="'Dummy Test, so something is in this place.'"></Label> 
             </GridLayout> 
         </template>
      </ListView> 
</StackLayout>

app.component.ts

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


class MovieInfo{
    constructor(public title: string) { }
}

@Component({
    selector: "my-app",
    templateUrl:'app.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {


    private myItems:Array<MovieInfo>;


    constructor(){
        this.myItems=[];
    }
    ngOnInit() {
        for (var i:number = 0; i < 100; i++) {
            this.myItems.push(new MovieInfo('Title ' + i));
        }
    }
}

Please let me know if you are still having any problems.