Question

我的组件中有多个复选框。每组具有某种逻辑连接的复选框都具有一个称为checkedXXX的字段，用于保存选中的对象。

例如：

shops: Shop[];
checkedShop: Shop[];
products: Product[];
checkedProduct: Product[];

在我的html代码中，为每个复选框添加了一个专用的（更改）方法：

  <mat-checkbox
    (change)="onChangeShop($event,shop)"> {{shop.name}}
  </mat-checkbox>

在我的代码中，我有一个通用的方法来处理复选框的每个选中/取消选中状态，还有一个处理特定的取消选中/选中状态的方法，该方法调用了我前面提到的方法：

  onChangeShop($event, shopArg){
    this.onChangeCheckbox($event, this.checkedShops, s=> s.id === shopArg.id , shopArg);
  }

  private onChangeCheckbox($event, arr: any[], filterLambda, checkedObject){
    const checkedObjectString = JSON.stringify(checkedObject);
    if ($event.checked){
      console.log('checkbox was checked : ' + checkedObjectString);
      arr.push(checkedObject);
    }
    else{
      console.log('checkbox was unchecked : ' + checkedObjectString);
      arr = arr.filter(obj => filterLambda(obj));
    }
  }

我注意到过滤器不起作用。即使lambda返回false，orig数组的大小也不会减小。

我尝试调试：

  console.log('checkbox was unchecked : ' + checkedObjectString);
  arr = arr.filter(obj => {
    console.log('filter result : ' + filterLambda(obj));
    return filterLambda(obj);
  });

并在控制台中看到以下内容：

checkbox was unchecked : {"...."}
filter result : false
checkbox was unchecked : {""}
filter result : false

但是数组的原始大小没有改变。

Answer 1

我不确定到底是什么问题（我想有些参考问题），但是我找到了一个更干净，更轻松的解决方案：

我在商店/产品中添加了另一个字段：

isSelected: boolean;

当我从onChange方法接收到对象时，我正在使用以下逻辑：

  onChangeCheckbox($event, obj) {
    if ($event.checked){
      obj.isSelected = true;
      console.log('checkbox was checked : ' + JSON.stringify(obj));
    }
    else {
      obj.isSelected = false;
      console.log('checkbox was unchecked : ' + JSON.stringify(obj));
    }
  }

通过这种方式，每个复选框组都不需要专用的方法。

此外，您还可以扩展原始对象，并将此字段添加到仅用于您的案例的新对象。

Answer 2

更改将lambda传递给filter方法的逻辑。下面是示例代码供您参考-

let arr: any[] = [];
arr.push({ id: 12, value: 'test' }, { id: 1, value: 'test' });

const onChangeCheckbox = function (arr: any[], filterLambda) {
      arr = arr.filter(filterLambda);
      console.log('checkbox was unchecked : ' + arr.length);// checkbox was unchecked : 1
}
// Call the function
onChangeCheckbox(arr, (s) => s.id === 12);//

尽管通过引用传递了Angular 10数组，但未更改

2 个答案: