Nativescript - ListPicker и Slider

Question

Я использую Nativescript с Angular для создания Android и iOS. Я хочу знать, как использовать тег i.e. Как добавить элементы для выбора в ListPicker, а также как код будет выглядеть в моем ts-файле для захвата ввода из ListPicker.

Я также хотел бы знать, как использовать тег и отображать текущее значение ползунка и что мой 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 repo, здесь вы найдете много полезных примеров.