CODEWITHSUNDEEP
nativescriptangular2-nativescriptnativescript-telerik-ui
Vladimir
Vladimir

Reputation: 2553

NativeScript "Switch" component

I'm seeing a really weird behavior with the Switch component...I'm using it inside of an ng-template, and every time I 'switch' one on, every other 10th Switch element is switched on as well. No idea where it's coming from, especially since the 'checked' attribute is not dynamic (see below). Anyone else experiencing this issue? Also, even though I see the other Switches turned on (or off, based on the previous state), the actual "onInviteContact()" is triggered only once, for the actual Switch component that was intentionally clicked. 

<RadListView
        [items]="contacts"
        class="list-group" width="100%">
    <ng-template tkListItemTemplate let-contact="item">
        <GridLayout class="contactItem" columns="2*, 3*, *, *" width="100%" orientation="horizontal">
            <Image col="0" *ngIf="contact.photo" [src]="contact.photo"
                   stretch="aspectFill" width="40%"></Image>
            <Image col="0" *ngIf="!contact.photo" src="res://profile_image"
                   stretch="aspectFill" width="40%"></Image>
            <Label col="1" class="nameLabel" [text]="contact.name"></Label>
            <Switch col="2" class="switchElement" checked="false"
                    (checkedChange)="onInviteContact($event, contact)"></Switch>
        </GridLayout>
    </ng-template>
</RadListView>

Upvotes: 1

Views: 1379

Answers (1)

Shiva Prasad
Shiva Prasad

Reputation: 438

The only possible explanation to this behavior is the use of Recycle Native View

https://github.com/NativeScript/NativeScript/blob/699e6f5da8ad79f5795e3758365115d681a146c2/tns-core-modules/ui/switch/switch-common.ts#L10

As you can see, it has been set to "auto"

I suspect that when the native view is recycled in a rad list view, or even a list view, the native view of the switch you turned on, got recycled, and used.

To avoid this, you should bind the checked property to some observable.

Hope this answers your question :)

Cheers!

Upvotes: 1

Related Questions