时间戳

首页 > 解决方案 > 条件复选框上的 Toastr 消息单击角度

javascript - 条件复选框上的 Toastr 消息单击角度

问题描述

简介：

我有一个表，其中一列只包含复选框作为值。我有一个名为validate的按钮。我在表格上方有一个值。我分配的值是 4。如果我启用的复选框数量多于上面给出的数量，我需要显示一条 toastr 消息。

我的问题：

例如，如果上面的数字是 4，我最多只能选中 4 个复选框。如果选中了超过 4 个复选框。我需要在单击验证按钮时显示 toastr 错误消息。

我尝试过的（可选阅读）：

Html 复选框和验证按钮：

<td>
    <input  type="checkbox" id="vehicle2" name="vehicle2"
      (change)="addCheckValue(i,list.isTicked)"
      [checked]="list.isTicked"
      [disabled]="list.isDisabled">
    </td>
   <button type="button" class="btn btn-outline-success"
   (click)="error()"  ><span class="fa fa-plus"></span>Validate</button>

TS：TS中的复选框启用条件：

 addCheckValue(index, isChecked) {
    if (isChecked === undefined) {
      isChecked = true;
    }
    this.listes[index].isTicked = isChecked;
    console.log(this.listes);
    if (this.listes[index].isTicked === true) {
      this.counts = this.counts + 1;
    }
    if (this.listes[index].isTicked === false) {
      this.counts = this.counts - 1;
    }
  }

TS 中的错误消息：

 error(){
 if(this.counts>this.a){

    this.toastr.error(
  `More cheeckboxes enabled.Total checkbox enabled is ${this.counts}`,
  "Total Error",
  {
    timeOut: 3000
  }

);}
   

 }

所以这段代码不起作用，因为上面的计数变量计算了复选框（选中和未选中）的点击次数，而不是计算选中了多少复选框。因此，如果我的值为 4，并且如果我选中并取消选中单个复选框 5 次，它将显示错误，这不是我想要的。如果你知道，请帮助我。

Stackblitzlink：https ://stackblitz.com/edit/angular-ivy-4vnwed?file=src%2Fapp%2Fapp.module.ts

注意：如果我的问题不清楚，请在评论中告诉我

标签： javascriptangulartypescriptcheckboxangular6

解决方案

 
 // Toggle checked flag.
 addCheckValue(index) {
    this.listes[index].isTicked = !this.listes[index].isTicked;
 }
 
 error() {
    const checkedCount = this.listes.filter(item => item.isTicked).length;
    if(checkedCount > this.a) {
       this.toastr.error(
          `More cheeckboxes enabled.Total checkbox enabled is ${this.counts}`,
          "Total Error",
          { timeOut: 3000 });
    }
}

推荐阅读