刷新ListView,在NativeScript和Angular中在运行时添加新元素 [英] Refresh a ListView adding new elements on runtime in NativeScript and Angular
问题描述
我正在构建一个基于ListView的组件,类似于{N}页面中的杂货示例.我有一个"+"按钮,需要将新项目添加到列表中,我有以下代码:
I'm building a ListView based component, similar to the groceries example in the {N} page. I have a "+" button, that needs to add new items 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());
}
}
这是模板:
<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的正确方法?
My problem is, when I click on the "+" button, I get an undescifrable exception. When I fill the list with code, no problem, but I need the user can add new elements to the view. How is the correct way to implement a dynamic ListView like I described?
主"线程上发生未捕获的异常. com.tns.NativeScriptException:调用js方法getView失败
An uncaught Exception ocurred on "main" thread. com.tns.NativeScriptException: Calling js method getView failded
错误在列表模板中找不到合适的视图!嵌套级别:0文件: "/data/data/org.nativescript.MyApp/files/app/tns_moudules/nativescript-angular/directives/list-view-comp.js, 行:135列:8
Error No suitable views found in list template! Nesting level:0 File: "/data/data/org.nativescript.MyApp/files/app/tns_moudules/nativescript-angular/directives/list-view-comp.js, line:135 column:8
StackTrace:框架:函数:'getSingleViewRecursive',文件:....
StackTrace: Frame: function:'getSingleViewRecursive', file:....
推荐答案
在NativeScript + Angular-2应用程序中,您可以使用
In NativeScript + Angular-2 application you can use AsyncPipe
有关如何在NativeScript + NG2应用程序中通过异步管道提供数据的示例,请参见
Example on how to provide data via async pipe in NativeScript + NG2 app can be found here
值得注意的是 RxObservable
page.component.ts
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
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>
在这个基本示例中,异步是使用setInterval模拟的,但基于相同的逻辑,您可以通过按钮实现所需的UX.
In this basic example the async is simulated with setInterval but based on the same logic you can achieve your desired UX with a button.
这篇关于刷新ListView,在NativeScript和Angular中在运行时添加新元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!