Scenario:
In my project, I am using Nativescript 5.0 with Angular.
- The data is fetched from an API and displayed in customers.component.ts
- I am successfully rendering the elements based on the received IDs in customers.component.html
- When the user interacts with Switches and clicks the Save Button, it triggers the saveData() function
- However, in the saveData() function, I am encountering issues in reading which Switches are checked
I have implemented the following code snippet in customers.component.html to display the data without any errors:
<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 the usage of [id]="'switch[' + id + ']'" correct? And how can I determine if any of the Switches are checked?
The Switches are dynamically generated based on the data retrieved from the API.
**Edit - Adding the updated 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 the important section of the ts file looks like this
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 ....");
}
}
If a user slides the switch, I expect the selected property to be updated accordingly within the observable array.
I am successfully able to visualize the expected data without any API communication errors or rendering issues.