Ion-select inside list

Ionic Framework ionic-v3
1

Hi,

I am using ion-select inside ion-list where each item has a select option. When i want to change the value using select option of one item then it automatically changes the value of items in whole list. I believe, i will have to limit the scope of ion-select inside one item only but not sure what will be the right way to handle that. Here is my code snippet:

HTML Code:

<ion-card card-bcg *ngFor="let item of items | async">
    <input type="hidden" [(ngModel)]="item.$key" />
    <ion-list>
      <ion-item no-margin  background-size item-bcg text-wrap *ngIf="role=='admin' || role=='teacher'" (tap)="goToItemProfile(item)">
        <ion-avatar item-left>
          <img [src]="item?.profilepic">
        </ion-avatar>
        <h2 item-title>{{item?.displayName}}</h2>
      </ion-item>
      <ion-item>
        <ion-label>Select options</ion-label>
        <ion-select [(ngModel)]="attendance" (ionChange)="onChange(attendance, item)">
          <ion-option value="present">Present</ion-option>
          <ion-option value="absent">Absent</ion-option>
        </ion-select>
      </ion-item>
    </ion-list>
  </ion-card>

Here is the onChange Code:

onChange(attendance, item) {
    console.log(this.attendance);
    this.key = item.$key;
    this.attendancedetails = this.db.object('/attendance/' + this.key);
    this.presentOn = this.db.list('/attendance/' + this.key + '/presentOn');

    var presentOnUpdate = {
      attendance: this.attendance,
      date: firebase.database['ServerValue']['TIMESTAMP'],
      markedBy: this.userData.uid,
      markerName: this.displayName
    }
    this.presentOn.push(presentOnUpdate).then(data => {
      //console.log(this.item.uid);
    });
  }

Please suggest the right way to handle this issue…

2

Can someone please help?

3

You only have one attendance variable all items? Why isn’t it something like item.willAttend: boolean ?

4

Attendance is being stored in a separate class hence i am just capturing the item id and storing attendance against that id in separate class.

5

Why isn’t that the cause of the problem?

6

Do you suggest to store it within the same class? Would it resolve the issue?

7

It looks as though your ngModel is changing the same variable no matter what you click. If your ngModel was set to item.attendance or something like that, you might have a different problem, but it wouldn’t be this one.

8

Though i am still making some changes in my code but looks like your logic is absolutely correct. Thanks a ton mate.