Nativescript - ListPicker und Slider

Question

Ich benutze Nativescript mit Angular, um für Android und iOS zu bauen. Ich möchte wissen, wie man das Tag verwendet, d. H. Wie ich Elemente zum Auswählen in den ListPicker hinzufüge und wie der Code in meiner ts-Datei aussehen würde, um die Eingabe vom ListPicker zu erfassen.

Ich würde auch gerne wissen, wie das Tag zu verwenden und den aktuellen Wert des Schiebereglers anzuzeigen und wie meine TS-Datei aussehen würde, um Eingaben vom Slider zu erfassen. Ich habe einen Tag wie folgt festgelegt: aber der Slider nicht verhalten, als ob es in 0,25-Schritten bewegt sich aber in ganzzahligen Schritten d 1 bis 2 und 2 bis 3

Vielen Dank für jede Hilfe.

Answer 1

Sie können die Zwei-Wege-Bindung des ListPicker verwenden, um auf die des Pickers zuzugreifen. Verwenden Sie einfach die Winkel 2 Zweiweg-Bindung Syntax [(ngModel)] und legen Sie es auf eine Reihe Eigenschaft Ihrer Komponente:

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

und hier ist ein Beispiel für den Code hinter einer solchen Winkelkomponente:

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); 
    } 
} 

Dieses Code-Snippet stammt aus this Beispiel aus dem nativescript-UI-Samples-Angular Github Repo, Sie können dort viele nützliche Beispiele finden.