0

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

在这里我选择项目并出现红色 X，单击它将清除数组。

这是我单击 X 后，数组清除，但项目仍处于选中状态

页面.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()在清除数组后取消选中该事件的复选框。

4

1 回答 1

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>

组件.ts

uncheckAll(){
    this.checkedItems = [];
    this.bic.forEach(node => node.isSelected = false);
}
于 2021-10-20T02:28:12.140 回答