在 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>

在 Angular Material 复选框中切换值

Toggle Value in Angular Material CheckBox

angular-material2

angular4

angular