Ionic 2 读取复选框值答案

【问题标题】：Ionic 2 read checkbox valueIonic 2 读取复选框值
【发布时间】：2017-08-18 23:13:39
【问题描述】：

我无法读取 ionic 2 中的复选框值我尝试了以下代码

<div class="form-group">
            <label ></label>
            <div *ngFor="let mydata of activity" >
                <label>
                        <input type="checkbox"
                           name="activity"
                           value="{{mydata.activity_id}}"

                            [checked]="activity.includes(mydata)" 

             (change)="changeSchedules(mydata)"
                           />
                    {{mydata.activity_name}}

                </label>
            </div>
        </div>

脚本文件

this.subscriptionForm = new FormGroup({

        activity: new FormArray(this.subscription.schedules.map(schedule => new FormControl(schedule)), Validators.minLength(1))
    });

changeSchedules(mydata: any) {

  var currentScheduleControls: FormArray = this.subscriptionForm.get('activity') as FormArray;
  var index = currentScheduleControls.value.indexOf(mydata);


    if(index > -1) 
    {currentScheduleControls.removeAt(index) }

    else 
{

    currentScheduleControls.push(new FormControl(mydata));
}

}

我搜索了很多东西，但我没有得到正确的解决方案有人可以帮助解决这个问题

【问题讨论】：

标签： angular ionic2

【解决方案1】：

请关注我认为对你有帮助

您的 .ts 文件代码

export class FormComponent {
 cbArr: string[];
    cbChecked: string[];
  constructor() {
    this.cbArr = ['OptionA', 'OptionB', 'OptionC'];
    this.cbChecked = [];
  }

  powers = ['Really Smart', 'Super Flexible',
            'Super Hot', 'Weather Changer'];

  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

  submitted = false;



  // TODO: Remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }

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);
          }

      }
  }
   updateOptions() {
    console.log(this.cbChecked);
  }
  /////////////////////////////

}

和你的 html 代码

      <label for="options">Options :</label>
        <div *ngFor="let cbItem of cbArr">
          <label>
            <input type="checkbox"
                   name="options"
                   value="{{cbItem}}"
                   [checked]="cbChecked.indexOf(cbItem) >= 0"
                   (change)="updateCheckedOptions(cbItem, $event)"/>
            {{cbItem}}
          </label>
 <button (click)="updateOptions()">Post</button>

updateOptions() 你会得到所有选中的复选框值

【讨论】：

【解决方案2】：

试试这个示例代码

@Component({
  templateUrl: 'example-page.html'
})
class ExamplePage {
  cb_value: boolean;

  updateCbValue() {
    console.log('Something new state:' + this.cb_value);
  }
}

<ion-list>

   <ion-item>
     <ion-label>Something</ion-label>
     <ion-checkbox [(ngModel)]="cb_value" (ionChange)="updateCbValue()"></ion-checkbox>
   </ion-item>

 </ion-list>

【讨论】：

请修正您的答案。运行代码时返回错误sn -p { "message": "Uncaught SyntaxError: Invalid or unexpected token", "filename": "https://stacksnippets.net/js", "lineno": 20, "colno": 9 }