离子2复选框值

时间:2017-04-20 09:28:32

标签: angular typescript ionic2

我以与答案中描述的相同方式引用Ionic 2 read checkbox value代码。但是我在控制台中收到错误消息:

 Cannot read property 'indexOf' of undefined

以下是我的home.html代码:

 <form #leadsForm = "ngForm">
    <ion-item>
        <ion-label>Assign to: </ion-label>
        <ion-select [(ngModel)]="saleRep" name="saleRep">
            <ion-option *ngFor="let agency of agencyReps;let i = index;" value="{{agencyRepsIds[i]}}"> {{ agencyReps[i] }}</ion-option>                        
        </ion-select>
    </ion-item>
    <button ion-button (click)="assignLeads()" block>Assign</button>

    <ion-list >
        <ion-item *ngFor="let t of leads;">
            <h2 [ngClass]="t.status">{{t.fname}} {{t.lname}} | {{ t.status}}</span></h2>
            <label>
                <input type="checkbox" value="{{t}}" [checked]="cbChecked.indexOf('t') >= 0" (change)="updateCheckedOptions(t, $event)" />
            </label>
        </ion-item>
    </ion-list>
</form>

引导* ngFor直接从后端获取,并且潜在客户数据列表完全正常。

home.ts如下:

  export class Leads {
    cbChecked: string[];
    saleRep;

    constructor() { }

    updateCheckedOptions(chBox, event) {
        var cbIdx = this.cbChecked.indexOf(chBox);

        if(event.target.checked) {
          if(cbIdx < 0 ){
               this.cbChecked.push(chBox);
             console.log(chBox);
          }
        } else {
          if(cbIdx >= 0 ){
             this.cbChecked.splice(cbIdx,1);
              console.log(cbIdx);
          }
        }
    }

    assignLeads(){
        console.log('Selected Representative',this.saleRep)
        console.log('CheckBox Value',this.cbChecked);
    }

 }

谢谢。

2 个答案:

答案 0 :(得分:1)

您尚未在任何地方初始化cbChecked

组:

 constructor() {
    this.cbChecked=[];
 }

答案 1 :(得分:1)

两点:

  • cbChecked: string[] = [];需要有初始值!否则它是未定义的!
  • [checked]="cbChecked.indexOf(t) >= 0"在此使用t而非't'