在 Nativescript + Angular App 中以编程方式设置 ListPicker.selectedIndex答案

【问题标题】：Programmatically set ListPicker.selectedIndex in Nativescript + Angular App在 Nativescript + Angular App 中以编程方式设置 ListPicker.selectedIndex
【发布时间】：2020-12-17 20:05:25
【问题描述】：

我正在开发我的第一个 Nativescript 应用程序，并且我选择了 Angular 作为框架。我遇到了一个 ListPicker 组件的小问题。我能够使用项目列表呈现组件，并且可以最初设置 selectedIndex；但是，当我稍后尝试以编程方式更改 selectedIndex 时（例如从 0 到 2），UI 中显示的值不会更新（在 Android 上测试）。令人惊讶的是，selectedIndexChange 回调确实记录了正确的新 selectedIndex。如何强制 UI 显示新 selectedIndex 的正确值？

【问题讨论】：

嗨@BikeBro - 你找到解决方案了吗，我面临着完全相同的问题？
我解决这个问题已经有一段时间了，但解决方案可能是在 ngZone 回调中设置 selectedIndex。
@melund 很多时候运行超时更新 UI 的语句会修复 UI 不更新的随机问题（这将自动使其在 ngZone 中运行）。

标签： angular nativescript listpicker

【解决方案1】：

ngZone.run 可用于帮助强制 UI 识别数据变化：

import { NgZone } from "@angular/core";

export class TestComponent {

    selectedIndex: number;

    constructor(private ngZone: NgZone) {}

    testMethod(pos: number): void {
        this.ngZone.run(() => {
            this.selectedIndex = pos;
        });
    }
}

【讨论】：