Nativescript - ListPicker和Slider

Question

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

我也想知道如何使用标签并显示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 repo中的this示例，您可以在那里找到很多有用的示例。