ionic4 购物车全选，反选

1.html结构

<ion-content>
  <ion-list *ngFor="let item of cartList"> 
    <span (click)="changeAll(item, $event)"><ion-checkbox [(checked)]="item.checkAll"></ion-checkbox>{{item.name}}</span>
    <ion-item *ngFor="let v of item.list">
      <ion-checkbox [(ngModel)]="v.checked" (ionChange)='change(item)' ></ion-checkbox>{{v.name}}
    </ion-item>  
  </ion-list>
</ion-content>

注：全选按钮的方法要写在<ion-checkbox></ion-checkbox>标签外的dom元素上，不然无法正确获取当前选中状态。

2.购物车数据结构

cartList =[
    {
      id: 1,
      name: '水果',
      checkAll: false,
      list: [
        {
          id: 2,
          name: '苹果',
          checked: false,
        },
        {
          id: 3,
          name: '苹果1',
          checked: false,
        },
        {
          id: 4,
          name: '苹果2',
          checked: false,
        },
      ]
    },
    {
      id: 5,
      name: '水果1',
      checkAll: false,
      list: [
        {
          id: 6,
          name: '苹果2',
          checked: false,
        },
        {
          id: 7,
          name: '苹果3',
          checked: false,
        },
        {
          id: 8,
          name: '苹果4',
          checked: false,
        },
      ]
    }
  ]

3.全选和反选方法

changeAll(item,e) {
    console.log(item.checkAll)
    console.log(e.target)
    console.log(e.target.checked)
    if(e.target.checked) {
      item.list.forEach(res => {
        res.checked = true;
      })
    } else {
      item.list.forEach(res => {
        res.checked = false;
      })
    }
    
  }


  change(item) {
    console.log(this.cartList)
    const arr = [];
    item.list.forEach(res => {
        arr.push(res.checked)
      })
      if (!arr.includes(false)){
        item.checkAll = true;
      } else {
        item.checkAll = false;
      }
  }