我希望“其他”案例只有在他们取消选中所有字段后才能工作，我该如何处理？

Question

我选择了 4 个复选框，如果我取消选中一个复选框，它会进入“其他”条件。但是只有在我取消选中所有字段后，我才希望它进入其他状态。我该如何解决这个问题。这是我的代码 .html

 <div class="form-check" *ngFor="let product of DisplayProductList">
                                    <label class="form-check-label text-break">
                                  <input class="form-check-input" type="checkbox" [value]="product.template_name"
                                  [(ngModel)]="product.isChecked" (change)="changeSelection($event)"> {{ product.template_name }}
                                  <span class="form-check-sign">
                                    <span class="check"></span>
                                  </span>
                                </label>
                                </div>

.ts

 changeSelection(event: any) {
    debugger;
    if (event.target.checked) {
      this.selectedItemsList = this.DisplayProductList.filter((product, index) => {

        if (product.isChecked == true) {
         return product.isChecked
 }
      }
      )
    } else {
      this.selectedItemsList = this.ProductData;
    }

希望我能在这里得到解决方案。谢谢

Answer 1

您可以创建一个 get 并简单地检查列表中是否有这样的真实值：isChecked(): boolean { return this.DisplayProductionList.some(x => x.checked); }

现在您可以在 if - else 块中使用此 get 属性。

Answer 2

为了让您在未选中所有复选框时运行 ELSE，您需要删除 else 并将其更改为 IF强> 首先。接下来，您需要设置一个条件来检查数组 DisplayProductList if all isChecked 属性是false。

见以下代码：

changeSelection(event: any) {
    if (event.target.checked) {
      this.selectedItemsList = this.DisplayProductList.filter(
        (product, index) => {
          if (product.isChecked == true) {
            return product.isChecked;
          }
        }
      );
    }
    if (this.DisplayProductList.every((el) => el.isChecked === false)) {
      this.selectedItemsList = this.ProductData;
    }
}

注意在 if 条件中，我使用 every，然后如果 false，我将检查每个具有 isChecked 属性的对象。这只会在DisplayProductList 中的所有isChecked 属性为假时返回true。

Answer 3

您的第一个 if 语句正在检查“event.target.checked”，即检查当前事件是否已选中。如果您取消选中复选框，则“取消选中”是当前事件，“event.target.checked”将为“假”。我会建议你做下面的事情

    changeSelection(event: any){
      for(i = 0; i < this.DisplayProductList.length; i++){
        if(this.DisplayProductList[i].isChecked == true){
          this.checked = true;
          break;
        }
      }
      
      if(this.checked){
       // if block
      }
      else{
       // else block
      }
    }