Angular +Ionic复选框实现单选多选功能

一，html中：

 <ion-content>
        <ion-list class="my-tracks-content">
          <ion-list class="my-tracks-details" *ngFor="let item of collectionLists">
             <!-- <img [src]="advImage.pictureUrl"> -->
                <ion-img class="tracks-details-img" 
                [src]="item.pic">
                </ion-img>
                <ion-text class="tracks-details-text">
                   <ion-list class="text-text">
                    {{item.goodsName}}
                   </ion-list>
                  <ion-list class="text-price">
                    <span> ￥{{item.fixedPrice}}<b>/盒</b></span> <a>销量:{{item.salesVolume}}</a>
                  </ion-list>

                </ion-text>
                <ion-text *ngIf="!showEdit"></ion-text>
                  <!-- -->
                    <ion-checkbox *ngIf="showEdit" [(ngModel)]="item.checked" (click)="selectSingle(item)" class="checkbox" [id]="item.id">
                </ion-checkbox>
          </ion-list>
        </ion-list>
  </ion-content>

    <ion-footer>
      <div class="my-tracks-footer" *ngIf="showEdit">
        <span>
          <ion-checkbox [(ngModel)]="selectAll" (click)="onselectAll()"></ion-checkbox>
          <ion-text>全选</ion-text>
        </span> 
        <span (click)="deleteById()">删除</span>
      </div>
    </ion-footer>

二，ts中

//单选
  selectSingle(item) {
    this.checkedId = item.id;
    this.collectionLists.forEach(el => {
      if (el.checked == false) {
        this.selectAll = false
      } 
    });
    if (this.collectionLists.every(el => el.checked==true)){ 
      this.selectAll = true;
    }
  }
//多选
  onselectAll() { 
    if (this.selectAll) {
      this.collectionLists.forEach(el => {
        el.checked =false;
      });
    } else {
      this.collectionLists.forEach(el => el.checked = true
    );
    }
  }

三，实现效果