切换角度材料复选框中的值答案

【问题标题】：Toggle Value in Angular Material CheckBox切换角度材料复选框中的值
【发布时间】：2017-04-02 06:32:33
【问题描述】：

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

组件

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 无法在 md-checkbox 上读取这个选中的事件，如何解决这个问题任何指针都会很棒

谢谢

【问题讨论】：

那么，$event.target 的值是多少？
$event.target 的值来自复选框属性，因为代码中没有材料，它检查复选框是否被选中
我知道它是什么......但它的价值是什么
记录您试图查看其属性的对象，它可能会阐明发生了什么问题
为什么不直接使用this？

标签： angular angular-material2 angular4

【解决方案1】：

查看 cmets 尝试以下操作，希望这可以解决问题，我猜您不需要在 Material 中使用 target 和 event。

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

【讨论】：