Nativescript radlistview crashes navigating back from the details page

Question

When slow loading the big list of items in a Component with < RadListView > in it's template, user can navigate to Details page of item by tap, and after navigating Back get such error:

JS: ERROR Error: java.lang.IndexOutOfBoundsException: Invalid index 5, size is 2
JS:     java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255)
JS:     java.util.ArrayList.add(ArrayList.java:147)
JS:     com.telerik.widget.list.ListViewAdapter.add(ListViewAdapter.java:65)

I think this means that Component is "frozen" in a cache but data is still going from Observable object from the service. And after Component started to continue of creating new items in listview it is crashed because has already missed few.

How to properly bind stream of data to RadListView component with possibility to still loading it when Component is not active? I would like that user can navigate to Details page and back during process of loading data...

This is the Template part:

<RadListView id="listView" [items]="listings" height="100%" class="page page-content">
    <ListViewGridLayout tkListViewLayout spanCount="{{ spanCount }}">
        <ng-template let-item="item" let-i="index">
            <StackLayout class="card-view" id="{{ i }}" listing_id="{{ item.listing_id }}" orientation="vertical" (tap)="onTap($event)">
                <Image class="card-image" src="{{ item.url_170x135 }}" height="135" width="170" stretch="aspectFill"></Image>
                <StackLayout orientation="vertical" horizontalAlignment="center">
                    <Label className="nameLabel" [text]="getTitle(item.title)"></Label>
                </StackLayout>
            </StackLayout>
        </ng-template>
    </ListViewGridLayout>
</RadListView>

This is the Component code:

listings = new ObservableArray<any>();

constructor(private productService: ProductService, private page: Page, private routerExtensions: RouterExtensions) {}

ngOnInit(): void {
    this.productService.getListingsAdopted().subscribe((item) => this.listings.push(item));

Can you create a Playground where the issue can be reproduced? — Manoj
which {NS} version? and what is the platform(android/ios)? Also it would be helpful if you can share listview version as well — Narendra
tns info Component nativescript has 5.0.1 version and is up to date. Component tns-core-modules has 5.0.2 version and is up to date. Component tns-android has 5.0.0 version and is up to date. Component tns-ios has 5.0.0 version and is up to date. — Eugene Bolshakov
Here is the sample project for reproducing the situation: github.com/eugenner/test-details-back.git (template project: Angular + SideDrawer) When list of items started to display you can tap on one item and after few seconds pressing back you will see this: JS: ERROR Error: java.lang.IndexOutOfBoundsException: Invalid index 6, size is 4 JS: java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255) — Eugene Bolshakov

Eugene Bolshakov Eugene Bolshakov · Accepted Answer · 2018-11-24T14:08:20

Just added listView.refresh() when return to the page with list of items:

    ngOnInit(): void {
        this.page.on("navigatedTo", (data: NavigatedData) => {
            if (data.isBackNavigation) {
                this.listView = <RadListView>(this.page.getViewById("listView"));
                this.listView.resumeUpdates(true); // works too
                // this.listView.refresh();

                return;
                ...

Nativescript radlistview crashes navigating back from the details page

1 Answers