angular-material2 - 切换 Angular Material 复选框中的值

Question

我有一个模板驱动表单，其中放置了一个可以切换其值的复选框。

组件

public toggles = [
    { value: 'toggled', display: 'Toggled' },
    { value: 'untoggled', display: 'UnToggled' },
];

<div>
    <input type="hidden" name="toggle" [(ngModel)]="user.toggle">
    <div>
        <label>
            <input type="checkbox"
                [checked]="user.toggle === toggles[0].value" 
                (change)="$event.target.checked? (user.toggle =  toggles[0].value) : (user.toggle = toggles[1].value)">
            {{ toggles[0].display }}
        </label>
    </div>
</div>

以下内容效果很好，但是当我切换到 Angular Material 时，它就无法工作。

Material 模板代码

<input type="hidden" name="toggle" [(ngModel)]="user.toggle">
<md-checkbox [checked]="user.toggle === toggles[0].value"
               (change)="$event.target.checked?(user.toggle = toggles[0].value): (user.toggle = toggles[1].value)">
    {{toggles[0].display}}</md-checkbox>

我在控制台中收到以下错误，它表示无法读取未定义控制台的属性，

TypeError: Cannot read property 'checked' of undefined
        at Object.eval [as handleEvent] (TemplateDrivenComponent.html:64)

我知道发生错误的点 $event.target.checked Angular 无法读取 md-checkbox 上的此选中事件，如何解决此问题任何指针都会很棒

谢谢

Answer 1

查看评论，尝试以下操作，希望这可以解决问题，我猜您不需要在 Material 中使用带有事件的目标。

 <input type="hidden" name="toggle" [(ngModel)]="user.toggle">
        <md-checkbox [checked]="user.toggle === toggles[0].value"
                       (change)="$event.checked?(user.toggle = toggles[0].value): (user.toggle = toggles[1].value)">
            {{toggles[0].display}}</md-checkbox>