Реализация поведения переключателя с помощью переключателя в Nativescript (angular 2)

Я пытаюсь имитировать поведение переключателя в nativescript, но у меня проблемы с привязкой. Приведенный ниже код почти работает, но если я «долго нажимаю» или как бы прокручиваю один из переключателей, я не верю, что привязка работает, потому что тогда он не отменяет выбор, когда я нажимаю другой переключатель.

<StackLayout orientation="horizontal" *ngFor="let site of sites">
    <Label [text]="site.station_name" class="medium-spacing" (tap)="goToObserve()"></Label>
    <Switch text="" [checked]="isSiteSelected(site)" (tap)="toggleSite(site)"></Switch>
</StackLayout>

Вот функция компонента

toggleSite(site) {
    setTimeout(() => {
        for(var s of this.sites) {
            if(s.station_id == site.station_id) {
                s.selected = true;
            }
            else {
                s.selected = false;
            }
        }
    }, 50);
}

Есть идеи по правильной реализации? Я пробовал различные итерации с использованием [ngModel] и (propertyChange) = "toggleSite (site)", но, похоже, ничего не работает. Также setTimeout кажется хакерским, но без него казалось, что переключатель всегда находится за переключателем.

Решение, которое я использую на основе ответа @Nikolay Tsonev. Я счастлив, что смог избавиться от setTimeout. Вероятно, неправильно передавать оба параметра toggleSite ($ event, site), но, похоже, это работает.

<StackLayout orientation="vertical">
  <StackLayout orientation="vertical" class="data-grid">
    <StackLayout class="grid-header" orientation="horizontal">
      <Label text="Sites" class="left-column" width="70%"></Label>
      <Label text="Selected" class="right-column" width="30%"></Label>
    </StackLayout>
    <ScrollView height="50%">
      <StackLayout>
        <StackLayout orientation="horizontal" *ngFor="let site of sites" height="50">
          <Label text="{{ cameraIcon }}" (tap)="viewSitePhoto()" class="icon" width="10%"></Label>
          <Label [text]="site.station_name" class="medium-spacing" (tap)="viewSiteObservations()" width="60%" text-align="left"></Label>
          <Switch text="" [checked]="site.selected" (checkedChange)="toggleSite($event, site)" width="30%" text-align="right"></Switch>
            </StackLayout>
        </StackLayout>
    </ScrollView>
  </StackLayout>
</StackLayout>

и внутри моего компонента у меня есть:

toggleSite(event, site) {
    let newSwitchValue = event.value;
    if(newSwitchValue) {
        for(var s of this.sites) {
            if(s.station_id == site.station_id) {
                s.selected = true;
            }
            else {
                s.selected = false;
            }
        }
    }
}

nativescript angular data-binding angular2-nativescript
person apricity    schedule 10.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать событие Switch checkedChange, которое уведомит вас об изменении значения компонента. Прилагаю образец кода. Для получения дополнительной помощи вы можете просмотреть этот пример - примеры.

app.component.html

<StackLayout orientation="horizontal" >
    <Label text="station_name" class="medium-spacing"></Label>
    <Switch  checked="isSiteSelected" (checkedChange)="selectedvalueChanged($event)"></Switch>
</StackLayout>

app.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public counter: number = 16;

    public get message(): string {
        if (this.counter > 0) {
            return this.counter + " taps left";
        } else {
            return "Hoorraaay! \nYou are ready to start building!";
        }
    }

    public onTap() {
        this.counter--;
    }
     public selectedvalueChanged(args) {
         console.log(args.object.checked)

}
}
person Nikolay Tsonev    schedule 11.10.2016