如何防止ion-checkbox选择相同的项值？

Question

这是一个手风琴列表菜单，在菜单的第三级，我为每个项目设置了一个复选框。这段代码已经从选择的项目中获取了值，但问题是，当我取消选择时，它会让我继续获取它的值。如何防止复选框选中相同的项目并在选中时取消？

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

​

​

Answer 1

您可以访问项目的open属性，然后决定显示什么内容，或者是否显示快捷栏。

我还猜测红色按钮值存储在SelectedItemToFix中，因此只有新的项将存储在按钮中。

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