離子2讀取複選框值

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

嘗試實例驗證碼

@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>