0

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 can some one help me please where did i do mi-stack

.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.empoloyeeID].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>
1
  • No one have idea about this ? Commented Jul 30, 2018 at 11:51

1 Answer 1

1

No need to add event listeners to update the value of the model(contact). As you have bind(two-way) that property in the html file.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks sudheer ,Its helped me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.