从详细信息页面浏览回来的Nativescript radlistview崩溃

时间:2018-11-19 14:58:24

标签: data-binding nativescript radlistview

当在模板中使用缓慢加载组件中的大项目列表时,用户可以通过点击导航到项目的“详细信息”页面,并在导航后返回该错误:

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)

我认为这意味着组件在缓存中处于“冻结”状态,但是数据仍来自服务中的Observable对象。而且,在Component开始继续在listview中创建新项目之后,由于已经丢失了很少的内容,它崩溃了。

如何将数据流正确绑定到RadListView组件,并在组件处于非活动状态时仍然可以加载它?我希望该用户可以在加载数据的过程中导航到“详细信息”页面并返回...

这是模板部分:

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

这是组件代码:

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

1 个答案:

答案 0 :(得分:1)

仅在返回带有项目列表的页面时添加listView.refresh():

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