Nativescript Listpickerのインデックスの変更が機能しない

Question

私はtsファイルのobs配列を使って作成しているNativescriptでListPickerを作成しました。

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イベントを使用して、選択したアイテムのインデックスを処理できます。あなたは添付のサンプルコードを見直すことができます。

メインpage.xml

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

メインpage.ts

import { EventData } from "data/observable"; 
import { Page } from "ui/page"; 
import {ObservableArray} from "data/observable-array"; 
import {Observable, PropertyChangeData} from "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; 
}