Failed resolving method setChecked on class android.widget.Switch

[NickIliev]

From @LunicLynx on August 14, 2017 22:49

The Problem

When using an ngIf on a StackLayout including a Switch like so:

<StackLayout *ngIf="data | async; let data">
    <Switch [(ngModel)]="data.toggle"></Switch>
</StackLayout>

Using a two-way binding. One will get the following error:

JS: ERROR Error: java.lang.Exception: Failed resolving method setChecked on class android.widget.Switch
JS:     com.tns.Runtime.resolveMethodOverload(Runtime.java:1004)
JS:     com.tns.Runtime.callJSMethodNative(Native Method)
JS:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1043)
JS:     com.tns.Runtime.callJSMethodImpl(Runtime.java:925)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:912)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:896)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:888)
JS:     com.tns.gen.java.lang.Runnable.run(Runnable.java:10)
JS:     android.os.Handler.handleCallback(Handler.java:733)
JS:     android.os.Handler.dispatchMessage(Handler.java:95)
JS:     android.os.Looper.loop(Looper.java:136)
JS:     android.app.ActivityThread.main(ActivityThread.java:5001)
JS:     java.lang.reflect.Method.invokeNative(Native Method)
JS:     java.lang.reflect.Method.invoke(Method.java:515)
JS:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
JS:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
JS:     dalvik.system.NativeStart.main(Native Method)

This seems to be a general problem with ngModel and Switch, whenever the value gets lazily initialized this error seems to happen.

Platforms

Android

Versions

• CLI: 3.1.3

package.json

{
	"description": "NativeScript Application",
	"license": "SEE LICENSE IN <your-license-filename>",
	"readme": "NativeScript Application",
	"repository": "<fill-your-repository-here>",
	"nativescript": {
		"id": "org.nativescript.ngIfSwitchIssue",
		"tns-android": {
			"version": "3.1.1"
		}
	},
	"dependencies": {
		"@angular/animations": "~4.2.0",
		"@angular/common": "~4.2.0",
		"@angular/compiler": "~4.2.0",
		"@angular/core": "~4.2.0",
		"@angular/forms": "~4.2.0",
		"@angular/http": "~4.2.0",
		"@angular/platform-browser": "~4.2.0",
		"@angular/router": "~4.2.0",
		"nativescript-angular": "~4.2.0",
		"nativescript-theme-core": "~1.0.2",
		"reflect-metadata": "~0.1.8",
		"rxjs": "~5.4.2",
		"tns-core-modules": "~3.1.0",
		"zone.js": "~0.8.2"
	},
	"devDependencies": {
		"babel-traverse": "6.4.5",
		"babel-types": "6.4.5",
		"babylon": "6.4.5",
		"lazy": "1.0.11",
		"nativescript-dev-typescript": "~0.5.0",
		"typescript": "~2.4.2"
	}
}

Repo that reproduces the error

I created a repo reproducing the error. Just start it and wait for 5 Seconds.
https://github.com/LunicLynx/ns-ngif-switch-ngmodel-async-issue

Copied from original issue: NativeScript/NativeScript#4694

[NickIliev]

From @LunicLynx on August 14, 2017 22:52

This is a workaround:

export class AppComponent implements OnInit, OnDestroy {
    subscription: Subscription;
    dataSubject: BehaviorSubject<{ toggle: boolean }> = new BehaviorSubject({ toggle: true });
    data = this.dataSubject.asObservable();

    ngOnInit(): void {
        this.subscription = Observable.of({ toggle: false }).delay(5000).subscribe(
            data => {
                this.dataSubject.next(data);
            }
        );
    }

    ngOnDestroy(): void {
        this.subscription.unsubscribe();
        this.subscription = null;
    }
}

But i think it should work either way.

[NickIliev]

From @EddyVerbruggen on August 15, 2017 8:43

I'm not sure if it helps for your case, but have you tried this?

<StackLayout>
    <Switch [(ngModel)]="data?.toggle"></Switch>
</StackLayout>

[sis0k0]

related to #846

[LunicLynx]

@NickIliev it's not possilbe to use the ?. operator in two way bindings.

[jarrodchesney]

This worked for me, I've made the names more generic, but otherwise this is my code.

My XML/HTML

    <Switch #boolValSw [checked]="obj?.boolVal"            
        (checkedChange)="setBoolVal(boolValSw.checked)" ></Switch>

My TypeScript

    obj = {boolVal:false};

    setBoolVal(val:boolean) {
        this.obj.boolVal = val;
    }