在Angular 2中，如何将复选框值发送到组件中的函数？

我不熟悉Angular和NgFor，我正在显示我想要选择的元素，单击后我应该在组件函数中获得ID。 但我尝试使用ngModel，所有的按钮都被选中了

当用户选中复选框时，我试图获取（hero.id）。我该怎么做？我的错误是什么

我的HTML

{{hero.time}}

这是我的组件

从'@angular/core'导入{Component，OnInit}；
从“../../services/validate.service”导入{ValidateService}；
从“../../services/alarm.service”导入{AlarmService}；
从“angular2 flash messages”导入{FlashMessagesService}；
从'@angular/Router'导入{Router}；
@组成部分({
选择器：“应用程序寄存器”，
templateUrl:“./register.component.html”，
样式URL:['./register.component.css']
})
导出类RegisterComponent实现OnInit{
小时；
id：字符串；
timeid：字符串；
时间
英雄：任何[]；
建造师(
私有validateService:validateService，
专用FlashMessage:FlashMessages服务，
专用路由器：路由器，
专用报警服务：报警服务
) {
}
恩戈尼尼特（）{
这个.ui（）；
}
onRegisterSubmit（）{
这个.ui（）；
this.heros=JSON.parse（localStorage.getItem（'users'）；
var timeStr=新日期（此.hours）；
var日期=新日期（timeStr）；
var day=date.getUTCDate（）；
var year=date.getUTCFullYear（）；
var month=date.getUTCMonth（）+1；
var hour=date.getUTCHours（）；
var minutes=date.getUTCMinutes（）；
var dateStr=“时间为“+hour+”：“+minutes+”，在24小时内，日期为“+day+”/“+month+”/“+year”；
console.log（dateStr）；
变量用户={
小时：（新日期（this.hours.replace（'T'，''）.replace（'-'，'/'））.valueOf（），
id:new Date（）.getTime（），
时间：dateStr，
国旗:0,，
}
设置超时（（）=>{
this.FlashMessage.show（'您的闹钟已添加'{
cssClass:“警报成功”，
超时：5000
});
}, 10);
var storage=localStorage.getItem（'users'）；
var final=[]；
if（存储==null | |类型（存储）==未定义）{
最终推送（用户）；
localStorage.setItem（'users'，JSON.stringify（final））；
让时间=新日期（）.getTime（）
this.AlarmService.setUpAlarms（时间）；
}否则{
var get=JSON.parse（localStorage.getItem（'users'））；
var size=Object.keys（get.length）；
for（var i=0；i{
this.heros=JSON.parse（localStorage.getItem（'users'）；
console.log（this.heros）；
}, 100);
}
onSubmit（）{
变量用户={
timeid:this.timeid，
}
console.log（用户）；
}
}

以下是一个简单的示例：

普朗克：

要检测选中该框的用户，需要使用

change

事件绑定。然后调用函数并将更改传递给它

$event

。这里的

$event

是关键语法。然后，您可以从该事件访问各种内容，主要是

目标

，它是已更改的HTML元素

。。然后您将获得id，因为它是该输入的值

    //our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div>
        <form>
          <tr *ngFor="let hero of heroes">
          <input (change)="check($event)" type="checkbox" name="timeid" value ="{{hero.id}}" class="{{hero.id}}">{{hero.time}}<br>
          </tr>
        </form>
      </div>
    </div>
  `,
})
export class App {
  name:string;
  // sample heros with an id and time..
  heroes =
    [
      {"id":1,"time":"2017-06-01T05:00:00.000Z"},
      {"id":2,"time":"2017-06-02T05:00:00.000Z"},
      {"id":3,"time":"2017-06-03T05:00:00.000Z"},
      {"id":4,"time":"2017-06-04T05:00:00.000Z"},
      {"id":5,"time":"2017-06-05T05:00:00.000Z"}
    ];
  constructor() {
    console.log(JSON.stringify(this.heroes))
    this.name = `Angular! v${VERSION.full}`
  }
  check(e){
    console.log(e)
    console.log(e.target.checked)
    console.log(e.target.value)
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
{{hero.time}}

`,
})
导出类应用程序{
名称：字符串；
//带id和时间的英雄示例。。
英雄=
[
{“id”：1，“时间”：“2017-06-01T05:00:00.000Z”}，
{“id”：2，“时间”：“2017-06-02T05:00:00.000Z”}，
{“id”：3，“时间”：“2017-06-03T05:00:00.000Z”}，
{“id”：4，“时间”：“2017-06-04T05:00:00.000Z”}，
{“id”：5，“时间”：“2017-06-05T05:00:00.000Z”}
];
构造函数（）{
log（JSON.stringify（this.heros））
this.name=`Angular！v${VERSION.full}`
}
支票（e）{
控制台日志（e）
console.log（e.target.checked）
console.log（例如target.value）
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

这很管用，但你能解释一下英雄在这里做什么吗？这是可行的，但如果我理解的话，我会更有知识。那么他们是如何沟通的呢？newDate的作用是什么？哦，它只是一个简单的数组。。让我用一个显式数组来更新答案：）非常感谢，先生，一百万票。你救了我一天！这就是为什么我总是在答案中包含代码：）应该很容易移动到plunker或其他位置：）