Pfthb

Scenario:

Using Nativescript 5.0 with Angular

1. I have data coming from API (customers.component.ts)


2. Rendering n number of as many IDs I get from API. Works great (customers.component.html)


3. User taps the Switches to make his choice and finally taps Save Button which calls a function saveData()


4. In saveData(), I am unable to read which Switches are checked.

I tried below in customers.component.html, it renders perfectly based on the data received from API. No error in this.

<ListView [items]="_coursesmeta" [height] = "_coursesmeta.length == 0 ? 30 : _coursesmeta.length * 70" class="list-group">
 <ng-template let-result="item"> 
 <GridLayout rows="auto auto" columns="* *" class="m-5" verticalAlignment="stretch">
 <Label class="h3 m-15" [text]="result.coursename" textWrap="true" row="0" col="0"></Label>
 <Switch [id]="'switch[' + id + ']'" class="m-15" row="0" col="1" ></Switch> 
 </GridLayout>
 </ng-template>
</ListView>

Is

[id]="'switch[' + id + ']'"
this ok?
Is there any way to read if any of the Switches are checked.

Switches are dynamically created based on API data.

**Edit - adding code below **

<ListView [items]="_coursesmeta" [height] = "_coursesmeta.length == 0 ? 30 : _coursesmeta.length * 70" class="list-group">
 <ng-template let-result="item"> 
 <GridLayout rows="auto auto" columns="* *" class="m-5" verticalAlignment="stretch">
 <Label class="h3 m-15" [text]="result.coursename" textWrap="true" row="0" col="0"></Label>
 <Switch [checked]="result.selected" class="m-15" row="0" col="1" ></Switch> </GridLayout>
 </ng-template>
 </ListView>

and important portion of ts file is

import Component, OnInit from "@angular/core";
import RouterExtensions from "nativescript-angular/router";
import ActivatedRoute from "@angular/router";

import ObservableArray from "data/observable-array";
import * as Permissions from "nativescript-permissions";
import Coursemeta from "../../shared/coursemeta.model";
import CoursemetaService from "~/app/shared/coursemeta.service";
var contacts = require( "nativescript-contacts" );

import finalize from 'rxjs/operators';

export class ContactManagerComponent implements OnInit 

 public constructor(private router: RouterExtensions, private route: ActivatedRoute, private _coursemetaservice: CoursemetaService) 
 public _coursesmeta: ObservableArray<Coursemeta> = new ObservableArray<Coursemeta>(); 

 ngOnInit(): void 
 this.callerName=this.route.snapshot.params["callerName"]; 
 this.callerNumber=this.route.snapshot.params["callerNumber"]; 
 this.input="";
 this._coursemetaservice.getCoursesmeta()
 .pipe(finalize(() => this._isLoading = false))
 .subscribe((coursesmeta: Array<Coursemeta>) => 
 this._coursesmeta = new ObservableArray(coursesmeta); 
 this.courseCount=this._coursesmeta.length; 
 this._isLoading = false; 
 ); 
 

public ShowSelectedCourses()


 for(var i=0; i < this._coursesmeta.length; i++)
 
 if(this._coursesmeta.getItem(i).selected == false)
 
 alert("false = " + i);
 
 
 alert("Saved ...."); 

What I expect is, if user slides the switch, then selected property should change its value as its part of observablearray.

I am able to see data as expected, no error in API data communication, rendering is perfect.

Mutiple ways to achive the desired

1. 
   

   Add the onSwitchChecked

   
   
   
   

and in your .ts file handle the onSwitchChecked

 import Switch from 'ui/switch';
 public onSwitchChecked(args) {
 const sortSwitch = <Switch>args.object;
 if (sortSwitch.id === 'id of your swich') 
 if (sortSwitch.checked) 
// Change the _coursesmeta or result.selected here.
 
 

2. 
   

   Use the ng model for your result.checked e.g.

   
   
   

   <Switch [(ngModel)]='isSwitchChecked' (checkedChange)="onSwitchChecked($event)"></Switch>
   

   
   

and in yout .ts

 public onSwitchChecked() 
 alert(this.isSwitchChecked);
 

I have created playground and you can test functionality there.

I wouldn't recommend using dynamic IDs. Also when using ListView, it's not guaranteed that all your Switches / templates are alive, as you scroll up and down same element will be recycled with different data to retain performance.

So you should play with data here, bind the checked state of Switch to a property in data item. For example

<Switch [checked]="result.selected" class="m-15" row="0" col="1" ></Switch>

Now you will just have to loop through the array to find which item is selected.