刷新列表视图，在NativeScript和Angular中的运行时添加新元素

我正在构建一个基于ListView的组件，类似于{N}页面中的groceries示例。我有一个“+”按钮，需要将新项目添加到列表中，我有以下代码：

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());
    }

}

以下是模板：

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

我的问题是，当我点击“+”按钮时，我得到了一个不可破解的异常。当我用代码填充列表时，没有问题，但我需要用户可以向视图中添加新元素。如何正确地实现我所描述的动态ListView

编辑：

“主”线程上发生未捕获的异常。 com.tns.nativeScript异常：调用js方法getView失败

错误：在列表模板中找不到合适的视图！嵌套级别：0文件： “/data/data/org.nativescript.MyApp/files/app/tns_moudules/nativescript-angular/directives/list-view-comp.js， 行：135列：8

StackTrace:Frame:函数：'getSingleViewRecursive'，文件：

---

在NativeScript+Angular-2应用程序中，您可以使用

可以找到有关如何在NativeScript+NG2应用程序中通过异步管道提供数据的示例

值得注意的是使用了RxObservable

page.component.ts

从“@angular/core”导入{Component，ChangeDetectionStrategy}；
从“rxjs/Observable”导入{Observable as RxObservable}；
导出类数据项{
构造函数（public id:number，public name:string）{}
}
@组成部分({
templateUrl:“ui类别/listview/使用异步管道/使用异步管道.component.html”，
changeDetection:ChangeDetectionStrategy.OnPush，
})
使用SyncPipeComponent导出类{
公共项目：RxObservable；
构造函数（）{
设项目=[]；
for（设i=0；i<3；i++）{
推送（新数据项（i，“数据项”+i））；
}
let subscr；
this.myItems=RxObservable.create（订阅服务器=>{
subscr=订户；
订户。下一个（项目）；
返回函数（）{
log（“取消订阅呼叫！”）；
};
});
设计数器=2；
让intervalId=setInterval（（）=>{
计数器++；
推送（新数据项（计数器+1，“数据项”+（计数器+1））；
子项下一项（项目）；
}, 1000);
设置超时（（）=>{
clearInterval（intervalId）；
}, 15000);
}
}

page.component.html

---

在这个基本示例中，使用setInterval模拟异步，但基于相同的逻辑，您可以通过按钮实现所需的用户体验。

您使用“Undiscifrable”是什么意思？到Undiscifrable可以在这里发布它？我的意思是StackTrace上有很多行引用.js文件。我发布了第一行（由于某些原因，我无法复制剪贴板上的所有异常）稍微修改一下这段代码，我实现了我想要的。我现在的问题是，如果我在模板中添加自定义组件而不是标签，我会得到相同的异常。有没有网站解释这是如何工作的？谢谢！

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);
    }
}

<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>