Nativescript Switch prevent change event firing on initial binding

问题

Hi my template is something like the below

<ListView [items]="modules">
    <template let-item="item" >
        <StackLayout orientation="vertical">
                <Switch (checkedChange)="onSwitchModule(item.id,$event)" [checked]="item.active"></Switch>
        </StackLayout>
    </template>
</ListView>

My controller is

ngOnInit() {
    this._moduleService.getUserModules()
        .subscribe(
            response=>{
              this.modules = response.data;
            }
        )

}

onSwitchModule(itemId) {
   console.log(itemID); //Gets called on initial true binding on switch checked
}

The onSwitchModule get called everytime the page loads with item.active is true on any item, how to handle this ?

NOTE: Beginner in Nativescript

回答1:

I ran into a similar issue: loading up settings data from an API, and having the checked event fire for the value I'd set from the api -- not desirable in my case. I didn't see a great way to prevent events from firing on the initial binding, so I decided to simply ignore events until I knew they were legit events from the user actually using the switch.

I did that by using a property switchReady to keep track of when you want to start recognizing change events. This pattern also keeps the toggle disabled until you're ready to start accepting changes. This makes use of Switch's isEnabled property, see docs here.

Markup

<Switch [checked]="currentSettings.pushTurnedOn" [isEnabled]="switchReady" (checkedChange)="onPushSettingChange($event)" row="0" col="1"></Switch>

Component

export class SettingsComponent implements OnInit {
  currentSettings: Settings = new Settings(false)    
  switchReady: boolean = false

  ngOnInit() {
    this.getCurrentSettings()
  }

  public onPushSettingChange(args) {
    let settingSwitch = <Switch>args.object

    if (settingSwitch.isEnabled) {
      // do something with the event/change    
    } else {
      // we aren't ready to accept changes, do nothing with this change          
      return
    }
  }

  getCurrentSettings() {
    this.settingsService.loadCurrentSettings().subscribe(
      () => {
        this.currentSettings = this.settingsService.currentSettings
        // we've applied our api change via data binding, it's okay to accept switch events now
        this.switchReady = true
      },
      err => alert('There was a problem retrieving your settings.')
    )
  }
}

回答2:

What I did to overcome this is I watch for tap events instead of checkedChange:

<Switch (tap)="switchClicked" [checked]="item.active"></Switch>

and in the callback, you can get the current item from bindingContext:

function switchClicked(args) {
  const item = args.object.bindingContext.item;
}

来源：https://stackoverflow.com/questions/41118760/nativescript-switch-prevent-change-event-firing-on-initial-binding

标签

nativescript

angular2-nativescript