How to prevent ion-checkbox from selecting the same item value?

问题

This is an accordion list menu and at the 3rd level of the menu, I put a checkbox for each item. This code already getting the value from the item selected but the problem is when I cancel my selection it keeps me getting its value. How can I prevent a checkbox from selecting the same item and cancel if it is selected?

form.html

<!-- Third-Level -->
<ion-item *ngFor="let item of child.children" detail-none class="child-item" 
          text-wrap no-lines>
   <ion-label>
      {{ item.name }} 
      <p style="color: #0077ff;">
         {{ item.open ? 'Item Selected' : '' }}
      </p> 
   </ion-label>
   <!-- <ion-checkbox item-end (click)="tofix(item)"></ion-checkbox> -->
   <ion-checkbox item-end [(ngModel)]="item.open" (click)="tofix(item)"></ion-checkbox>
</ion-item>

form.ts

export class FormPage  implements OnInit{
   data: any[];

   @Input('item') item: any;

   constructor(
      public navCtrl: NavController, 
      public navParams: NavParams, 
      private http: Http,
      private toastCtrl: ToastController) {
         this.http.get('assets/data/menus.json')
            .map(res => res.json().items)
            .subscribe(data => this.data = data);

         this.title = navParams.get('title');
         this.subtitle = navParams.get('subtitle');
    }

   toggleSection(i) {
      this.data[i].open = !this.data[i].open;
   }

   toggleItem(i, j) {
      this.data[i].children[j].open = !this.data[i].children[j].open;
   }

   ngOnInit() {
   }

   async tofix(item){
      const toast = await this.toastCtrl.create({
         message: `Added item to be fix : ${item.name}`,
         duration: 2000
      }); 

      this.SelectedItemToFix += `${item.name}`;
      toast.present();
   }

   ionViewDidLoad() {
      console.log('ionViewDidLoad FormPage');
   }   
}

回答1:

You can access the open attribute of your item and then decide what to display, or if display the snackbar at all.

Also i gues the red button value is stored in SelectedItemToFix, so only the new item will be stored in the button.

async tofix(item){
   this.SelectedItemToFix = item.open ? `${item.name}` : '';

   // If you dont want to display the snackbar
   // if(!item.open) return;

   const toast = await this.toastCtrl.create({
      message: `${item.open ? 'Added' : 'Removed'} item ${item.open ? 'to' : 'from'} be fix : ${item.name}`,
      duration: 2000
   });

   toast.present();
}

来源：https://stackoverflow.com/questions/58435895/how-to-prevent-ion-checkbox-from-selecting-the-same-item-value

标签

angular

ionic3