Ionic：取消选中所有复选框的按钮

Question

我有一个复选框列表设置，它将所选项目添加到一个数组中，该数组将其发送到服务。我有一个运行函数的按钮，该函数在单击时清空数组，但复选框仍处于选中状态。

Here I select items and the red X appears, clicking that will clear the array.

Here is after I click the X, the array clears, but the items remain checked

page.ts

    if (this.checkedItems.includes(item)) {
      this.checkedItems = this.checkedItems.filter((value) => value != item);
    } else {
      this.checkedItems.push(item)
    }
    console.log(this.checkedItems);
  }
  createRoutine() {
    this.workoutService.selectedWorkouts = this.checkedItems;
    console.log(this.checkedItems);
  }
  uncheckAll(){
    this.checkedItems = [];
  }

page.html

<div>
    <ion-searchbar placeholder="Search..." [(ngModel)]="filterTerm" animated="true"></ion-searchbar>
    <ion-list class="accordion-list">
      <ion-card size="full" >
        <ion-card-header> 
          <ion-item class="workout-title">            
            <ion-card-title> Workouts</ion-card-title>
            <a slot="end"><ion-icon name="close-outline" size="large" color="bic" *ngIf="checkedItems.length > 0" (click)="uncheckAll()"></ion-icon></a>
          </ion-item>
        </ion-card-header>
         <ion-card-content>
          <ion-list *ngFor="let workout of bic | filter:filterTerm | orderBy:'asc':'muscle'; let i = index;" class="workout-list" >    
            <ion-item>
              <ion-label>{{workout.name}}</ion-label>
              <ion-note>{{workout.muscle}}</ion-note>
              <ion-checkbox slot="end" color="bic" (ionChange)="onChange(workout)"></ion-checkbox>
            </ion-item>   
          </ion-list>
        </ion-card-content>
      </ion-card>
    </ion-list>
  </div>

所以我正在寻找一种解决方案，了解如何让 uncheckAll() 事件在清除数组后取消选中复选框。

Answer 1

您需要为复选框设置一个 [(ngModel)]，它将保持复选框的选中状态。这应该以 workout 节点为界。

我们可以标记为[(ngModel)]="workout.isSelected"，例如

里面uncheckAll循环遍历bic的数组，设置每个节点的isSelected为false

伪代码

模板

<ion-list *ngFor="let workout of bic | filter:filterTerm | orderBy:'asc':'muscle'; let i = index;" class="workout-list">
    <ion-item>
        <ion-label>{{workout.name}}</ion-label>
        <ion-note>{{workout.muscle}}</ion-note>
        <ion-checkbox
            slot="end"
            color="bic"
            [(ngModel)]="workout.isSelected"
            (ionChange)="onChange(workout)"></ion-checkbox>
    </ion-item>
</ion-list>

Component.ts

uncheckAll(){
    this.checkedItems = [];
    this.bic.forEach(node => node.isSelected = false);
}

Ionic：取消选中所有复选框的按钮

Ionic: button that unchecks all checkboxes

html

angular

ionic-framework

ionic5