Change CheckBox state on ion- list item click?

Question

I have a list and a checkbox in every row of it. I want that whenever I click on a checkbox, the object need to update based on checkbox state accordingly,but using my below when i tapped on checkbox i am getting exception like Unable to set property 'checked' of undefined or null reference

.ts:

export class Custom{
  name: string
  empoloyeeID: number
  checked:boolean
}

export class CheckboxListPage {

  contacts:Array<Custom> = [];
  constructor(public navCtrl: NavController, public navParams: NavParams) {

    let customObj1 = new Custom();
    customObj1.empoloyeeID = 1;
    customObj1.name = "Ramakrishna"; 

    let customObj2 = new Custom();
    customObj2.empoloyeeID = 2;
    customObj2.name = "Ramakrishna2"; 

    this.contacts.push(customObj1);
    this.contacts.push(customObj2);

  }

  updateCucumber(contact){
        this.contacts[contact.id].checked = !contact.checked;
  }

.html:

<ion-content padding>
  <ion-list>
        <ion-item *ngFor="let contact of contacts" (click)="update(contact)">
            <!-- <ion-avatar item-start>
              <img src="imgs/img_snow.jpg">
            </ion-avatar> -->
            <ion-avatar item-left>
                <img src="https://ionicframework.com/dist/preview-app/www/assets/img/marty-avatar.png">
              </ion-avatar>
             <h2>{{contact.name}}</h2>
            <p *ngIf="contact.id===1;else other_content">your if block</p>
            <ng-template #other_content><p>your else block1</p></ng-template>

            <ion-row>
                <ion-col col-2 no-padding no-margin>
                  <ion-item no-padding no-margin no-lines>
                    <ion-checkbox [(ngModel)]="contact.checked" (ionChange)="updateCucumber(contact)"></ion-checkbox>
                  </ion-item>
                </ion-col>
                <ion-col col-10 no-padding no-margin>
                  <ion-item no-padding no-margin no-lines>
                    Agree to <a target="_blank" href="http://www.terms-of-service.com">Terms of Service</a>
                     and <a target="_blank" href="http://www.privacy-policy.com">Privacy Policy</a>.
                  </ion-item>
                </ion-col>
              </ion-row>

          </ion-item>


</ion-list>
</ion-content>

My question is very clear ,user have a option to select and de-select multiple items using checkbox, But using above code when scrolling list then already checked check boxes became are un-checkd — Krish, Jul 30 '18 at 08:34
Here is the [stackblitz](https://stackblitz.com/edit/ionic-5dztnx?file=pages%2Fhome%2Fhome.ts) of your code. The behavior you are saying is not there. Please be clear. — Mystery, Jul 30 '18 at 08:43
when i tap on checkbox how can i updated checkbox state that's why my main problem(suppose if i want to get all my checked list data then how can i find either row is checked or un checked ) — Krish, Jul 30 '18 at 08:57
@Mystery my problem is very clear,I want to update object when user change checkbox state — Krish, Jul 30 '18 at 09:09

score 0 · Answer 1 · answered Jul 30 '18 at 09:27

0

Not sure if I got you right, but if you want to update the corresponding contact object every time the checkbox is clicked you can try something like this:

export class CheckboxListPage {
  contacts = [
    {
      name: "Ramakrishna",
      id: 1,
      selected: false
    },
    {
      name: "Ramakrishna2",
      id: 2,
      selected: false
    }
  ]

  constructor(public navCtrl: NavController,
    public navParams: NavParams) {}

  updateCucumber(contact) {
    contact.selected = !contact.selected;
  }
}

Your HTML stays pretty much the same:

<ion-checkbox (ionChange)="updateCucumber(contact)"></ion-checkbox>

answered Jul 30 '18 at 09:27

Phonolog

6,321
3
36
64

your just updating object but have to update object in contacts list corresponding index,can you please post that code also – Krish Jul 30 '18 at 09:43
did you understand what i am asking?] – Krish Jul 30 '18 at 09:53
getting exception Unable to set property 'selected' of undefined or null reference – Krish Jul 30 '18 at 10:43
You don't have to deal with any index, see this [stackblitz](https://stackblitz.com/edit/ionic-fwsq4n?file=pages%2Fhome%2Fhome.ts). I added `console.log(this.contacts)` to be able to check the status of the contacts array... – Phonolog Jul 30 '18 at 14:51

Change CheckBox state on ion- list item click?

.ts:

.html:

1 Answers1