javascript - angular2 Material 复选框是否选中

Question

我在 Material 中使用 Angular 2。单击复选框时，我想选中或不选中 Material 复选框。我通过将点击事件传递给组件函数来完成。但它在使用 Material 复选框时不起作用。它仅在使用 html 复选框时有效。

<md-checkbox class="example-radio-button" [value]="hobby 1" (click)="hobbyClicked($event)">
    hobby 1
</md-checkbox>


hobbyClicked(evt){
    console.log(evt.target.checked);   // undefined
}

Answer 1

使用 [ngModel] 和 (change) 指令，基于复选框是否被选中，你可以从 DOM 中检索一个值。

<md-checkbox class="example-radio-button" 
  [ngModel]="hobby" value="hoby 1"
  (change)="hobbyClicked($event)">
    hobby 1
</md-checkbox>

代码

hobbyClicked(evt){
  console.log(evt.checked ? evt.source.value: '');   // undefined
}

Demo