使用 Angular 中的复选框从数组中删除数据? [英] Removing data from array using checkbox in Angular?

问题描述

我有一个包含一些通过 API 生成的数据的 mat-table，例如以下是一个片段:

I have a mat-table with some data generated through an API, here's a snippet for example:

<mat-table [dataSource]="dataSource$">
     <ng-container matColumnDef="process">
        <mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell>
        <mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell>
     </ng-container>
     <ng-container matColumnDef="reprocess">
      <mat-header-cell *matHeaderCellDef>  
         <button tslbutton class="tslbutton" id="reprocessButton">
            Reprocess
         </button> 
      </mat-header-cell>
      <mat-cell id="reprocessCell" *matCellDef="let execution">
         <mat-checkbox (change)="reprocessHomeProcesses(execution)" class="checker"></mat-checkbox>
      </mat-cell>
   </ng-container>
</mat-table>

基本上，每一行都有一个进程和一个复选框.复选框上方是一个按钮，它将使用已检查数据的数组调用 API.我需要添加执行"单击复选框将数据转换为数组.目前，我可以使用 (change) 函数将数据发送到 TS.这将调用以下函数:

Basically, each row has a process and a checkbox. Above the checkbox is a button that will call an API with an array of the checked data. I need to add the "execution" data to an array by clicking the checkbox. Currently, I'm able to send the data to the TS using the (change) function. This calls the following function:

executions = []

reprocessHomeProcesses(exe) {
    this.executions.push(exe);
    console.log(this.executions)
  }

这成功地将执行对象添加到数组中.看起来像这样:

This successfully adds the execution object to the array. Looks like this:

[{process: 1234, ....}]

但是，当我取消选择复选框时，它会再次添加相同的对象

However, when I deselect, the checkbox, it adds the same object again

[{process: 1234, ....}, {process: 1234, ....}]

(正如预期的那样，我还没有 this.executions.pop() 的任何逻辑)如何重写该函数，以便当我取消选中该复选框时，它会从数组?

(as expected, I don't have any logic for this.executions.pop() yet) How can I rewrite the function so that when I deselect the checkbox, it removes the object from the array?

我咨询了这个问题:Remove deselected checkbox value from Array using Angular 但我似乎无法让它为我的代码工作，也许布局上有一些细微的差异.但是，在取消选中复选框时从数组中删除项目的任何帮助都会有很大帮助！

I consulted this question: Remove deselected checkbox value from Array using Angular but I could not seem to get it to work for my code, maybe there's some slight differences in layout. But any help to remove item from array when checkbox is deselected would be great help!

我想我对添加和删除有所了解，只是不太明白如何区分选中和取消选中.

I think I have an understanding of the adding and removal I just dont really understand how to differentiate check vs uncheck.

推荐答案

我的解决方案非常简单.我在函数调用中添加了一个事件 - 就像这样.

My solution was pretty simple. I added an event to the function call - like this.

<tsl-checkbox #myCheckbox [checked] (change)="setHomeProcesses(execution, $event)"></tsl-checkbox>

reprocessHomeProcesses(exe, event: any) {
    if (event.checked) {
      this.reprocesses.push(exe)
    } else {
      var index = this.reprocesses.indexOf(exe)
      if (index > -1) {
        this.reprocesses.splice(index, 1);
      }
    }
  }

这里可以根据需要工作.

This works as needed here.

这篇关于使用 Angular 中的复选框从数组中删除数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！