Refresh ListView by adding new elements at runtime in NativeScript and Angular

Question

I am creating a ListView-based component similar to the grocery example on the {N} page. I have a + button that should add new elements to the list, I have this code:

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

@Component({
    moduleId: module.id,
    selector: 'my-list',
    templateUrl: 'my-list.component.html'
})
export class ListComponent implements OnInit {
    private myList: CustomObject;
    constructor() { }

    ngOnInit() { }

    addItem(){
        this.myList.push(new CustomObject());
    }

}

And here is the template:

<StackLayout>
    <Button text="+" (tap)="addItem()" ></Button>
    <ListView [items]="myList">
        <template let-item="item" let-i="i">
            <Label text="item.name"></Label>
        </template>
    </ListView>
</StackLayout>

My problem is that when I click the "+" button, I get an exception throwing an exception. When I populate the list with code, no problem, but I need the user to be able to add new elements to the view. How to implement a dynamic ListView as I described?

EDIT:

A thrown exception is associated with a "main" thread. com.tns.NativeScriptException: js getView method call failed

! : 0 : "/data/data/org.nativescript.MyApp/files/app/tns_moudules/nativescript- angular/directives/list-view-comp.js, : 135 : 8

StackTrace: Frame: function: 'getSingleViewRecursive', :....

Answer 1

NativeScript + Angular -2 AsyncPipe

, NativeScript + NG2,

, RxObservable

page.component.ts

import { Component, ChangeDetectionStrategy } from "@angular/core";
import { Observable as RxObservable } from "rxjs/Observable";

export class DataItem {
    constructor(public id: number, public name: string) { }
}

@Component({
    templateUrl: "ui-category/listview/using-async-pipe/using-async-pipe.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UsingAsyncPipeComponent {
    public myItems: RxObservable<Array<DataItem>>;

    constructor() {
        let items = [];
        for (let i = 0; i < 3; i++) {
            items.push(new DataItem(i, "data item " + i));
        }

        let subscr;
        this.myItems = RxObservable.create(subscriber => {
            subscr = subscriber;
            subscriber.next(items);
            return function () {
                console.log("Unsubscribe called!");
            };
        });

        let counter = 2;
        let intervalId = setInterval(() => {
            counter++;
            items.push(new DataItem(counter + 1, "data item " + (counter + 1)));
            subscr.next(items);
        }, 1000);

        setTimeout(() => {
            clearInterval(intervalId);
        }, 15000);
    }
}

page.component.html

<ListView [items]="myItems | async" class="list-group">
    <template let-item="item" let-i="index" let-odd="odd" let-even="even">
        <GridLayout class="list-group-item" [class.odd]="odd" [class.even]="even">
            <Label [text]="item.name" android:class="label-item"></Label>
        </GridLayout>
    </template>
</ListView>

async setInterval, UX .