Slider Nativescript-列表选择器和滑块

我正在使用Nativescript和Angular为Android和iOS构建。我想知道如何使用标记，即如何向ListPicker添加要选择的项目，以及如何在ts文件中查看代码以捕获ListPicker的输入

我还想知道如何使用标签和显示滑块的当前值，以及我的ts文件从滑块捕获输入时的样子。我有一个标签设置如下： 但滑块的行为不像是以0.25的增量移动，而是以整数的增量移动，即1到2和2到3

---

感谢您的帮助。

您可以使用ListPicker的双向绑定来访问picker的

selectedIndex

。只需使用angular 2双向绑定语法[（ngModel）]，并将其设置为组件的数字属性：

<ListPicker [items]="locations" [(ngModel)]="selectedLocationIndex"></ListPicker>

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "data/observable-array";
import { DataService } from "../data.service";
import * as DependencyObservableModule from "ui/core/dependency-observable";
import * as ProxyModule from"ui/core/proxy";

@Component({
    moduleId: module.id,
    selector: "my-component",
    providers: [DataService],
    templateUrl: MyComponent.html',
    styleUrls: ["MyComponent.css"]
})
export class MyComponent extends DependencyObservableModule.DependencyObservable implements OnInit {
    private static selectedLocationIndexProperty = new DependencyObservableModule.Property(
        "selectedLocationIndex",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None,
            MyComponent.onSelectedLocationIndexPropertyChanged));
    private static locationsProperty = new DependencyObservableModule.Property(
        "locations",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None));
    private static currentLocationroperty = new DependencyObservableModule.Property(
        "currentLocation",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None));

    constructor(private _dataService: DataService) {
        super();
    }

    ngOnInit() {
        this.locations = new ObservableArray(this._dataService.getDrawerLocations());
        this.currentLocation = SideDrawerLocation.Left;
        this.selectedLocationIndex = 0;
    }

    get selectedLocationIndex(): number {
        return this._getValue(MyComponent.selectedLocationIndexProperty);
    }

    set selectedLocationIndex(value: number) {
        this._setValue(MyComponent.selectedLocationIndexProperty, value);
    }

    get locations(): ObservableArray<SideDrawerLocation> {
        return this._getValue(MyComponent.locationsProperty);
    }

    set locations(value: ObservableArray<SideDrawerLocation>) {
        this._setValue(MyComponent.locationsProperty, value);
    }

    get currentLocation(): SideDrawerLocation {
        return this._getValue(MyComponent.currentLocationroperty);
    }

    set currentLocation(value: SideDrawerLocation) {
        this._setValue(MyComponent.currentLocationroperty, value);
    }

    private static onSelectedLocationIndexPropertyChanged(args) {
        var myComp: MyComponent = args.object;
        myComp.onSelectedLocationIndexChanged(args);
    }

    private onSelectedLocationIndexChanged(args) {
        this.currentLocation = this.locations.getItem(this.selectedLocationIndex);
    }
}

这是这样一个角度分量背后的代码示例：

<ListPicker [items]="locations" [(ngModel)]="selectedLocationIndex"></ListPicker>

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "data/observable-array";
import { DataService } from "../data.service";
import * as DependencyObservableModule from "ui/core/dependency-observable";
import * as ProxyModule from"ui/core/proxy";

@Component({
    moduleId: module.id,
    selector: "my-component",
    providers: [DataService],
    templateUrl: MyComponent.html',
    styleUrls: ["MyComponent.css"]
})
export class MyComponent extends DependencyObservableModule.DependencyObservable implements OnInit {
    private static selectedLocationIndexProperty = new DependencyObservableModule.Property(
        "selectedLocationIndex",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None,
            MyComponent.onSelectedLocationIndexPropertyChanged));
    private static locationsProperty = new DependencyObservableModule.Property(
        "locations",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None));
    private static currentLocationroperty = new DependencyObservableModule.Property(
        "currentLocation",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None));

    constructor(private _dataService: DataService) {
        super();
    }

    ngOnInit() {
        this.locations = new ObservableArray(this._dataService.getDrawerLocations());
        this.currentLocation = SideDrawerLocation.Left;
        this.selectedLocationIndex = 0;
    }

    get selectedLocationIndex(): number {
        return this._getValue(MyComponent.selectedLocationIndexProperty);
    }

    set selectedLocationIndex(value: number) {
        this._setValue(MyComponent.selectedLocationIndexProperty, value);
    }

    get locations(): ObservableArray<SideDrawerLocation> {
        return this._getValue(MyComponent.locationsProperty);
    }

    set locations(value: ObservableArray<SideDrawerLocation>) {
        this._setValue(MyComponent.locationsProperty, value);
    }

    get currentLocation(): SideDrawerLocation {
        return this._getValue(MyComponent.currentLocationroperty);
    }

    set currentLocation(value: SideDrawerLocation) {
        this._setValue(MyComponent.currentLocationroperty, value);
    }

    private static onSelectedLocationIndexPropertyChanged(args) {
        var myComp: MyComponent = args.object;
        myComp.onSelectedLocationIndexChanged(args);
    }

    private onSelectedLocationIndexChanged(args) {
        this.currentLocation = this.locations.getItem(this.selectedLocationIndex);
    }
}

从“@angular/core”导入{Component，OnInit}；
从“数据/可观测数组”导入{observearray}；
从“./data.service”导入{DataService}；
从“ui/core/dependency observable”导入*作为DependencyObservableModule；
从“ui/core/proxy”导入*作为ProxyModule；
@组成部分({
moduleId:module.id，
选择器：“我的组件”，
提供者：[数据服务]，
templateUrl:MyComponent.html'，
样式URL:[“MyComponent.css”]
})
导出类MyComponent扩展DependencyObservable模块。DependencyObservable实现OnInit{
私有静态selectedLocationIndexProperty=新的DependencyObservableModule.Property(
“selectedLocationIndex”，
“MyComponent”，
新的ProxyModule.PropertyMetadata(
未定义，
DependencyObservableModule.PropertyMetadataSettings.None，
MyComponent.onSelectedLocationIndexPropertyChanged））；
私有静态位置属性=新的DependencyObservableModule.Property(
“地点”，
“MyComponent”，
新的ProxyModule.PropertyMetadata(
未定义，
DependencyObservableModule.PropertyMetadataSettings.None））；
私有静态CurrentLocationProperty=新的DependencyObservableModule.Property(
“当前位置”，
“MyComponent”，
新的ProxyModule.PropertyMetadata(
未定义，
DependencyObservableModule.PropertyMetadataSettings.None））；
构造函数（专用数据服务：数据服务）{
超级（）；
}
恩戈尼尼特（）{
this.locations=新的ObservableArray（this.\u dataService.getDrawerLocations（））；
this.currentLocation=SideDrawerLocation.Left；
this.selectedLocationIndex=0；
}
获取selectedLocationIndex（）：编号{
返回此值。\u getValue（MyComponent.selectedLocationIndexProperty）；
}
设置selectedLocationIndex（值：数字）{
此.\u设置值（MyComponent.selectedLocationIndexProperty，值）；
}
获取位置（）：ObservableArray{
返回此值。\u getValue（MyComponent.locationsProperty）；
}
设置位置（值：ObservableArray）{
此._设置值（MyComponent.locationsProperty，值）；
}
get currentLocation（）：SideDrawerLocation{
返回此值。\u getValue（MyComponent.CurrentLocationProperty）；
}
设置当前位置（值：SideDrawerLocation）{
此._设置值（MyComponent.CurrentLocationProperty，值）；
}
私有静态OnSelectedLocationInExpropertyChanged（args）{
var myComp:MyComponent=args.object；
myComp.onSelectedLocationIndexChanged（args）；
}
私有onSelectedLocationIndexChanged（args）{
this.currentLocation=this.locations.getItem（this.selectedLocationIndex）；
}
}

此代码段取自nativescript ui示例和github repo，您可以在其中找到许多有用的示例