javascript - 计算 Angular 2 Typescript 中选中了多少个复选框？

Question

如何使用 typescript 计算 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> 

Answer 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