Search code examples
angulartypescriptnativescriptangular2-nativescript

how to get all switch control value from listview row items in order in angular2 nativescript


I'm using modal dialog when clicking on button. In that, I'm using switch control in listview.

For every row item in listview, I need to perform switch control to get the value.

Edited:

app.modal.html:

  <ListView  [items]="getListData" class="list" height="160">
        <ng-template let-item="item" let-myIndex="index">

            <GridLayout rows="*" columns="1.5*, auto, auto">

                    <Label row="0" col="0" class="item-name" [text]="item.category" ></Label>

                    <Switch row="0" col="1" [checked]="item.toggleVal" (checkedChange)="onFirstChecked($event, myIndex)"></Switch>

                    <Image row="0" col="2" src="res://menu_alert" stretch="none"></Image>

            </GridLayout>

        </ng-template>
    </ListView>

app.modal.ts file:

public map: Map<number, boolean>;

public newFeedsList: Array<NewFeed> = [];

public constructor(private params: ModalDialogParams) {


this.map = new Map<number, boolean>();


}

  public onFirstChecked(args, index: number) {

     let firstSwitch = <Switch>args.object;

     if(index != null && firstSwitch.checked){

        this.map.set(this.newFeedsList[index].id , firstSwitch.checked);


        console.log("Map :",this.map);
        console.log("Map :", JSON.stringify(this.map));


      } else {


      }

    }

NewFeed.ts:

export class NewFeed {
constructor(public id: number,public toggleVal : string, public title: string, public description:string, public date:string,public category:string, public imageUrl:string,public iconName:string) {}

} 

So When I'm enabling the switch in listview row items, I'm storing the index in Array.

What is Happening:

Right now I'm unable to print the hash map in console. It is showing Map:[object Map] in console.

What I need:

When I'm click on switch in listview row items, it has to get the NewFeed id and toggleVal as a key and value. So that I used map.

In that I'm saving id as key and toggleVal as Value in map.But I'm unable to add the id and toggleVal in map.so i don't know whether those two values were added in map.

It should change in the same position, if we switch single listview row items 'n' number of times.


Solution

  • Why not saving it by index = value? you will get an array of value like:

    [
        true,  //index 0 is checked
        false, //index 1 is unchecked
        true,  //index 2 is checked
        ...    //globally index n is value
    ]
    

    and to build it like:

    public onFirstChecked(args, index: number) {
        let firstSwitch = <Switch>args.object; 
        //always assign whenever it is checked or not
        Global.newFeedArr[index] = firstSwitch.checked; 
    }
    

    Update:

    By using the Map class like you do, and storing value whenever it's checked or not:

    public map: Map<number, boolean>;
    constructor() {
        this.map = new Map<number, boolean>();
    }
    public onFirstChecked(args, index: number) {
        let firstSwitch = <Switch>args.object;
        this.map.set(this. newFeedsList[index].id, firstSwitch.checked);
        //this is a debug to display current entries
        console.log('this.map entries are:');
        this.map.forEach(function (value, key) {
            console.log(key + ' = ' + value);
        });
    }