时间戳

首页 > 解决方案 > 取消选中复选框后从数组中删除对象

angular - 取消选中复选框后从数组中删除对象

问题描述

我知道这是一个重复的问题，但我尝试了多种解决方案，但仍然无法使用我的代码。我有一个具有复选框值的 JSON 对象。因此，如果选中或未选中任何新复选框，我将该对象推入新数组。但是，如果我通过选中复选框推送任何对象，然后取消选中复选框，则它不会从新数组中删除，反之亦然。这是我的html代码

<div class="col-lg-2 m-3" *ngFor="let permission of resource.permissions; let i = index;">
  <mat-checkbox class="text-capitalize" (change)="permissionChange($event, permission)" [(ngModel)]="permission.allow">{{permission.name}}</mat-checkbox>
</div>

这是我的 ts

permissionChange(ev, permissionObj) {
    if (ev) {
      // Pushing the object into array
      this.changedPermissions.push(permissionObj);
    } else {
      let el = this.changedPermissions.find(itm => itm === permissionObj);

      if (el) this.changedPermissions.splice(this.changedPermissions.indexOf(el), 1);
    }

    console.log("changedPermissions", this.changedPermissions);
  }

任何帮助表示赞赏。提前致谢。

标签： angularobjectangular-material

解决方案

MatCheckbox 在复选框状态发生变化时发出事件。可以选中或取消选中。所以你基于 if(ev) 的逻辑是错误的。

这里发生的是，无论复选框的状态如何（选中或未选中），它总是被推送到数组中。

permissionChange(ev, permissionObj) {
    if (ev.checked) {
      // Pushing the object into array
      this.changedPermissions.push(permissionObj);
    } else {
      let el = this.changedPermissions.find(itm => itm === permissionObj);

      if (el) this.changedPermissions.splice(this.changedPermissions.indexOf(el), 1);
    }

    console.log("changedPermissions", this.changedPermissions);
}

编辑：

如果您只想推送检查值与原始值不同的项目，则首先将原始值存储在对象中。

private originalPermissions = [...this.resource.permissions];

permissionChange(ev, permissionObj) {
    let index = this.originalPermissions.findIndex(itm => itm.id === permissionObj.id);
    if (this.originalPermissions.allow !== permissionObj.allow) {
      // Pushing the object into array
      this.changedPermissions.push(permissionObj);
    } else {
      
      let el = this.changedPermissions.find(itm => itm.id === permissionObj.id);
      if (el) this.changedPermissions.splice(this.changedPermissions.indexOf(el), 1);
    }

    console.log("changedPermissions", this.changedPermissions);
}

推荐阅读