Выполнение поведения переключателя с помощью переключателя в Nativescript (угловой 2)

Question

Я пытаюсь имитировать поведение переключателя в 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 (сайт)", но ничего не работает. Кроме того, setTimeout кажется взломанным, но без него переключатель казался таким, что он всегда был один за переключателем.

Решение Я использую на основе ответа @Nololay 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; 
      } 
     } 
    } 
} 

Answer 1

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

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) 

} 
}