Nativescript - ListPicker and Slider

Question

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

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

谢谢你的帮助。

Answer 1

您可以使用ListPicker的双向绑定来访问选择器的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);
    }
}

这个代码片段取自nativescript-ui-samples-angular github-reo的这个例子，你可以在那里找到很多有用的例子。