代码之家  ›  专栏  ›  技术社区  ›  AbhiRam

更改离子列表项的复选框状态时更新了数组中的对象单击?

  •  0
  • AbhiRam  · 技术社区  · 6 年前

    我在每一行都有一个列表和一个复选框。我希望每当我单击一个复选框时,对象都需要相应地根据复选框状态进行更新,但是当我单击复选框时,使用下面的“我的”复选框时,会出现异常,如“无法设置属性”。 选中的 '的未定义或空引用可以有人帮助我请我在哪里做MI堆栈

    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 回复  |  直到 6 年前
        1
  •  1
  •   Sudheer P    6 年前