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

时间:2019-02-05 18:37:02

标签: typescript

我有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);
  }

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

2 个答案:

答案 0 :(得分:0)

使用您的代码,您需要检查值是否等于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');

 }

答案 1 :(得分:0)

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

尝试使用双向绑定:

<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