angular - 切换角度材料复选框中的值

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 时，它无法正常工作。

材料模板代码

<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 cannot read this checked event on 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>