将其变量设置为true或false时，如何防止复选框将其全部选中? [英] How to prevent checkbox from selecting all when setting its variable to true or false?

问题描述

我制作了一个手风琴列表，其中带有离子性[v3] 作为您可以在链接视频教程中看到选择选项菜单不在.html文件中.菜单中的列表项来自.json文件，如您在我的.ts文件中所见

I made an accordion list with ionic [v3] as you can see in the link video tutorial the select option menu is not in the .html file. The list items in the menu are from .json file as you can see in my .ts file

form.html

form.html

    .....
    <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;">{{ selected }}</p> </ion-label>
         <ion-checkbox item-end [(ngModel)]="value" (click)="tofix(item)"></ion-checkbox>
    </ion-item>
    .....

form.ts

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

      public SelectedItemToFix: string = '';

      @Input('item') item: any;

      constructor(public navCtrl: NavController, 
                  public navParams: NavParams, 
                  private http: Http,
                  private toastCtrl: ToastController) {
                    let localData = this.http.get('assets/data/menus.json').map(res => res.json().items);
                      localData.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() {
      }

    value = false;
    public selected: string = '';

        async tofix(item){
          let toast = await this.toastCtrl.create({
            message: `Added item to be fix : ${item.name}`,
            duration: 2000
          }); 
          console.log(this.value);
          this.SelectedItemToFix += `${item.name}`;
          if(this.value == true){
            this.selected = "Item Selected"
          }
          else{
            this.selected = "Cancelled"
          }
          toast.present();
        }

推荐答案

您将ngModel的所有复选框都设置为同一value.

You are ngModel all checkboxes to the same value.

要修复此问题，可以在对象上使用open属性:this.data[i].children[j].open.

To fix it you could use the open attribute on your object :this.data[i].children[j].open.

此外，您可以删除public selected: string = '';并在项目本身中执行此操作，这样一来，您会遇到与值相同的问题.

Also you can remove public selected: string = ''; and do it in the item itself, therwise you have the same problem as with the value.

.....
<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' : 'Cancelled'}}
          </p> 
     </ion-label>
     <ion-checkbox item-end [(ngModel)]="item.open" (click)="tofix(item)"></ion-checkbox>
</ion-item>
.....

这篇关于将其变量设置为true或false时，如何防止复选框将其全部选中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！