RadListView and Observable Items - application crash on setting items value

Question

I have a Vanilla Nativescript app that I am testing a RadListView on; populating the items from JS.

As soon as I SET the value of the ObservableArray the app just crashes. I have tried to set the value onload as well as on tap. In this example tab on the BOTTOM LABEL; at the moment a label at the top will display the set value so I know that the object does exist; but when trying to bind the data to the list view things go awry.

Below is the base code to replicate this issue; if you uncomment the line:

pageData.set("items", items);

Any direction would be much appreciated.

HOME-PAGE.XML

<Page class="page"
    navigatingTo="onNavigatingTo"  
    loaded="pageLoaded" 
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:lv="nativescript-ui-listview"
>

    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>

    <StackLayout>
        <!-- Add your page content here -->

        <Label  text="{{ toptext }}" textAlignment="center" color="#88f" fontSize="15" fontWeight="bold"/>


        <lv:RadListView height="350" items="{{ items }}" >
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="vertical">
                <Label fontSize="20" text="{{ itemName }}"/>
                <Label fontSize="14" text="{{ itemDescription }}"/>
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>

        <Label  text="BOTTOM LABEL" textAlignment="center" color="#f88" fontSize="33" fontWeight="bold" onTap="fillListview"/>

    </StackLayout>
</Page>

HOME-PAGE.JS

const HomeViewModel = require("./home-view-model");

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;

var items = new ObservableArray();

var pageData = new Observable();



function onNavigatingTo(args) {
    const page = args.object;
    page.bindingContext = new HomeViewModel();

}

exports.onNavigatingTo = onNavigatingTo;


exports.pageLoaded = function(args) {
    page = args.object;
    page.bindingContext = pageData;

    items.push(
        {
            itemName: "$USD / ZAR",
            itemDescription: "13.50",
            itemDate: "3 Jul 2019",
            itemImage: "~/images/arcade-fire.png"
        },
        {
            itemName: "$USD / ZAR",
            itemDescription: "18.00",
            itemDate: "17 Aug 2019",
            itemImage: "~/images/bon-iver.png"
        }
    )



};




exports.fillListview = function(args) {

    pageData.set("toptext", items);
//  pageData.set("items", items);

}

Answer 1

i tried to reproduce your problem in a playground project but all works fine, do you recive some error in console about your problem ??

Here is the project where i was trying your code