Question

我有3个复选框，如果用户将所有复选框都留空，则我要发出警告，用户必须至少标记一个复选框。

模板

<div *ngFor="let rol of roles">
      <mat-checkbox 
         [checked]="rol.checked"     
         (change)="onCheckboxChange()">
          {{rol.label}}
      </mat-checkbox>
      </div>

班级

roles = [
    {label: 'administrator', checked: false},
    {label: 'organizer', checked: false},
    {label: 'athlete', checked: false}
  ];

onCheckboxChange() {
    let count = 0;
    this.roles.forEach(key => {
      if (!key.checked) {
        count++;
      }
    });

    if (count === 2) {
      console.log('add a rol please');
    }
  }

我也尝试过这个：

onCheckboxChange() {
    let count = 0;
    for (const rol of this.roles) {
      if (rol.checked === false) {
        count++;
      }
    }

    console.log(count);
  }

现在，当所有复选框都未选中时，什么也没有发生。我的目标是验证是否至少标记了一个复选框，否则向用户发出警告。另外，告诉用户选择了哪个角色。

Answer 1

使用您的代码，您需要检查值是否等于3而不是2 。

if (count === 3) {
  console.log('add a rol please');
}

使用map运算符更新功能

let count = 0;

 this.roles.map((data) => {
     if (data.checked) {
         count++;
     }
})

 if (!count) {
    console.log('add a rol please');

 }

Answer 2

问题似乎是您正在检查组件中数组的值，但是当复选框被选中时，您没有代码会更改数组中的值。

尝试使用双向绑定：

<div *ngFor="let rol of roles">
      <input type="checkbox" 
         [(ngModel)]="rol.checked"     
         (change)="onCheckboxChange()">
          {{rol.label}}
 </div>

（我将其更改为常规复选框，而不是材料设计，但应以相同的方式工作。）

通过使用[(ngModel)]（双向绑定），当用户单击复选框时，数组中的基础checked属性将变为匹配。

您还可以按如下所示简化组件中的代码：

  onCheckboxChange() {
    // Returns false unless at least one box is checked.
    let result = this.roles.map(r => r.checked).some(value => value === true)
    if (!result) {
      console.log('add a rol please');
    }
  }

map操作从对象数组映射到您感兴趣的单个属性（checked属性）的数组，从而产生布尔值数组。 some方法测试是否有至少一个元素符合条件。有关some的更多信息，请参见此：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

我在这里有个闪电战：https://stackblitz.com/edit/angular-firumq

遍历对象数组并计算存在的布尔值

2 个答案: