Nativescript radlistview 从详细信息页面导航返回时崩溃答案

【问题标题】：Nativescript radlistview crashes navigating back from the details pageNativescript radlistview 从详细信息页面导航返回时崩溃
【发布时间】：2019-04-21 23:16:37
【问题描述】：

当在其模板中使用的组件中缓慢加载项目的大列表时，用户可以通过点击导航到项目的详细信息页面，并在导航返回后得到这样的错误：

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

【问题讨论】：

你能创建一个可以重现问题的 Playground 吗？
哪个 {NS} 版本？什么是平台（android/ios）？如果您也可以共享 listview 版本也会很有帮助
tns info 组件 nativescript 有 5.0.1 版本并且是最新的。组件 tns-core-modules 有 5.0.2 版本并且是最新的。组件 tns-android 有 5.0.0 版本并且是最新的。组件 tns-ios 有 5.0.0 版本并且是最新的。
这里是重现情况的示例项目：github.com/eugenner/test-details-back.git（模板项目：Angular + SideDrawer）当项目列表开始显示时，您可以点击一个项目，几秒钟后按下您将看到这个： JS: ERROR Error: java.lang.IndexOutOfBoundsException: Invalid index 6, size is 4 JS: java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255)
抱歉，忘记了：平台：android

标签： data-binding nativescript radlistview

【解决方案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;
                ...

【讨论】：