计算在 Angular 2 打字稿中选中了多少个复选框？答案

【问题标题】：Count how many check boxes checked in Angular 2 typescript?计算在 Angular 2 打字稿中选中了多少个复选框？
【发布时间】：2020-12-22 01:33:52
【问题描述】：

如何使用打字稿计算在 Angular 2/4 中检查了多少个框。它应该显示选中的复选框的计数，如果未选中，它应该减少到 0。

我的例子，来自服务器的数据，我循环遍历：

我知道如何在 Angularjs 中使用 foreach 函数，但无法理解如何在 Typescript 中执行此操作，通常我必须用 Typescript foreach 方法替换 angular foreach 方法？需要帮助

app.ts

  data = [
     {"name":"jason"},
     {"name":"james"},
     {"name":"josh"},
     {"name":"joshua"}
          ];



calculateChecked = function() {            
 let count = 0;

  angular.forEach(this.data, function(value) {    //don't work in typescript
    if(value.checked)
      count++;
  });

  return count;
   };
  };

app.htm

 <li class="list-group-item" *ngFor="let user of data">
    <input type="checkbox" [ngModel]="user.checked"/>
    {{user.name}}
    </li>


    <p>total checked: {{calculateChecked()}}</p>

应该显示：

如果未选中应该显示 0

  <div class="sasha-ui-list" #em *ngFor="let email of emails; let i=index"
   (click)="onAddtoMessage(email)"> <div class="row"> <div class="col-lg-1">
  <input class="magic-checkbox sasha_checkbox" name="emails" type="checkbox" 
  id="{{email.id}}" value="email" [checked]="checkboxFlag"> <label for="
 {{email.id}}"></label> </div>

【问题讨论】：

标签： javascript angular typescript checkbox

【解决方案1】：

如下图点击后应设为0，

 changed(){
    this.count = 0;
    this.data.forEach(item=>{
      console.log(item)
      if(item.checked){
        this.count= this.count+1
      }  
    } )
  }


<ul> <li class="list-group-item" *ngFor="let user of data">

<input type="checkbox" [(ngModel)]="user.checked" (ngModelChange)="changed()"/>
{{user.name}}
</li>

LIVE DEMO

【讨论】：

很好的答案和示例，但我无法将检查的键添加到数组中
@OleksandrFedorov 你能克隆数组并附加一个属性吗？
真的不想这样做，因为我会有大量数据
你能列出我所有的限制吗:(
是否有任何方法可以在不向数组添加属性的情况下进行计数，因为我将有来自服务器的自定义数据。每个对象都链接到一个复选框。我需要做的是计算增加/减少选择了多少个框。如果不添加已检查的属性plnkr.co/edit/9Ad7qerU7MMQBZApIhkx?p=preview，就无法真正理解这里是如何计算的

【解决方案2】：

未经测试的代码，但如果 data 是一个数组，这样的东西应该可以工作

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

【讨论】：

【解决方案3】：

使用 for..of 循环：

this.count: number = 0;
for (let datum of data) {
 if(dataum.checked) count++;
}

还有标记到..

<ul> <li class="list-group-item" *ngFor="let user of data">
  <input type="checkbox" [(ngModel)]="user.checked" (ngModelChange)="changed()"/>
{{user.name}}
</li>

<p>total checked: {{count}}</p>

【讨论】：