Nativescript - ListPicker和Slider

Question

我正在使用Nativescript和Angular爲Android和iOS構建。我想知道如何使用標籤，即如何添加項目以選擇ListPicker以及代碼如何在我的ts文件中查看以從ListPicker捕獲輸入。

我也想知道如何使用標籤並顯示Slider的當前值以及我的ts文件看起來像從Slider捕捉輸入的樣子。我有一個標籤設置如下： 但滑塊並沒有表現得好像在以0.25的增量移動，而是以整數增量，即1到2和2到3.

感謝您的任何幫助。

Answer 1

您可以使用ListPicker的雙向綁定來訪問選取器的selectedIndex。簡單地使用的角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); 
    } 
} 

此代碼片段摘自this示例來自nativescript-ui-samples-angular github庫，您可以在其中找到很多有用的示例。