Question

我无法读取离子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));
}

}

我搜索了很多东西，但我没有得到适当的解决方案有人可以帮助弄清楚这个

Answer 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（）您将获得所有选中的复选框值

Answer 2

试试这个示例代码

＆＃13;

@Component({
  templateUrl: 'example-page.html'
})
class ExamplePage {
  cb_value: boolean;

  updateCbValue() {
    console.log('Something new state:' + this.cb_value);
  }
}

＆＃13;

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

＆＃13;

Ionic 2读取复选框值

2 个答案: