当 ObservableArray 项目更改时重新渲染 Nativescript ListView答案

【问题标题】：Re-render Nativescript ListView when ObservableArray item changes当 ObservableArray 项目更改时重新渲染 Nativescript ListView
【发布时间】：2017-10-11 15:46:07
【问题描述】：

这就是我在视图中呈现 cases ObservableArray 的方式

<ListView [items]="cases" class="list-group" *ngIf="cases">
    <ng-template let-case="item">

说cases 有这些值：

cases = [{id: 1, name: "Sam"}, {id: 2, name: "Romio"}]

当我像这样更新第一个项目时，如何让我的 ListView 重新渲染或以某种方式更新视图？

cases[0]["name"] = "Michael"

【问题讨论】：

标签： nativescript angular2-nativescript nativescript-angular

【解决方案1】：

您是否尝试过应用 NgZone 中的更改？我用它来更新一个数组（不是 ObservableArray），相应的 RadListView 会自动更新。

this.ngZone.run(() => {

        this.dummyService.addFile(this.file).subscribe(
            (fileId) => {
                this.folder.push(this.file);
        },
        (error) => {
           this handleError(error);
        });
     });

【讨论】：

是的！这就是答案，谢谢。它可以按我的意愿和 ListView 工作。虽然我不明白为什么 ngZone 如此神奇！

【解决方案2】：

您将要在这里强制执行不变性。所以如果你必须改变数组中的第一个对象，我会的。之后我会尝试使用扩展运算符。

cases[0]["name"] = "Michael"
cases = [...cases];

这会将cases 设置为应该更新列表的数组的新实例。

【讨论】：

我已经尝试过更改实例，但是当您这样做时，nativescript 不会重新渲染视图，直到您在 UI 中点击某些内容。您所做的任何操作都足以重新渲染。但是仅仅改变实例本身是不够的。除了更新之外，我还尝试保留相同的实例，并删除旧对象并将新对象添加到数组中，但没有成功。在您对 UI 执行某些操作之前，不会重新渲染视图！