Nativescript Listpicker 索引更改不起作用

Question

我在 Nativescript 中创建了一个 ListPicker，我通过 ts 文件中的 obs 数组填充它。

Lickpicker displaying the obs array

我正在设置 selectedIndex 并且可以很好地选择它。但是，当我尝试将选择从一更改为二时，它没有接受更改。它甚至没有调用属性更改事件。 下面是我的 XML。

<StackLayout row="0">
    <StackLayout orientation="horizontal" style="vertical-align: center; margin: 5" row="0" cssClass="filterrow">
        <Button text="{{ $actAs + ' &#xf078;'}}" cssClass="filterbtn" tap="toggleActAsFilter"/>
    </StackLayout>

    <StackLayout cssClass="_card" style="vertical-align: center;" verticalAlignment="top" visibility="{{ showActAsFilter ? 'visible' : 'collapsed' }}">
        <ListPicker id="_listPicker" cssClass="filterlist" style="vertical-align: center;" items="{{ _actAsFilter }}" selectedIndex="selectedIndex" propertyChangeEvent="listIndexChanged"/>
    </StackLayout>

    <Label text="Selected Index:" row="1" col="0" fontSize="18" verticalAlignment="bottom"/>
    <TextField text="{{ selectedIndex }}" row="1" col="1" />
</StackLayout>

我的 propertyChangeEvent

public listIndexChanged = (args:EventData) => {
    let page = <View>args.object;
    console.log("list Index changed");
    let listP = page.getViewById("_listPicker");
}

这是在 ListPicker 中捕获更改的方法吗？

Answer 1

在您的情况下，您可以使用 Observable propertyChange 事件来处理所选项目的索引。您可以查看下面附加的示例代码。

主页.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout>
    <ListPicker items="{{ items }}" selectedIndex="{{lpSelectedIndex}}"></ListPicker>
  </StackLayout>
</Page>

main-page.ts

import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { Observable, PropertyChangeData} from "tns-core-modules/data/observable";

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    // Get the event sender
    var page = <Page>args.object;
    var observable:Observable= new Observable();
    var obsarray = new ObservableArray();
    obsarray.push("Item1");
    obsarray.push("Item2");
    obsarray.push("Item3");
    observable.set("lpSelectedIndex", 0);
    observable.set("items", obsarray);

    observable.addEventListener(Observable.propertyChangeEvent, function (pcd: PropertyChangeData) {
        console.log(pcd.eventName.toString() + " " + pcd.propertyName.toString() + " " + pcd.value.toString());
    });

    page.bindingContext = observable;
}