发生初始点击时出现奇怪的md-checkbox行为

我收到了意外的复选框行为。发生初始点击时出现奇怪的md-checkbox行为

当我最初点击我的复选框时，我得到了Facility对象的check()函数，并且this.check是FALSE，就像它应该是。我的切换语句!this.checked正常工作，newState分配的值为TRUE。 在下一行中，将该TRUE值分配给this.checked，我看到波纹，但不显示任何检查。

当我随后点击此复选框时，我再次进入Facility对象的check（）函数，尽管复选框未被选中，但this.check值为TRUE。 我的toggle语句再次起作用，并且newState的值为FALSE，并且this.checked现在为FALSE。奇怪的是，在此之后，检查出现。

这是怎么回事？

父树节点类

export class TreeNode { 
    id: string; 
    name: string; 
    checked: boolean; 

    constructor(id: string, name: string) { 
     this.id = id; 
     this.name = name; 
     this.checked = false; 
    } 
}

儿童设施类

import { TreeNode } from './tree-node'; 

export class Facility extends TreeNode { 

    constructor(id: string, name: string) { 
     super(id, name); 
    } 

    check() { 
     console.log('Facility Check: facility = '+ this.name); 
     let newState = !this.checked; 
     this.checked = newState;; 
    } 
}

HTML，超过一个设施阵列迭代

<div *ngFor="let facility of facilities" > 
    <md-checkbox [checked]="facility.checked" (click)="facility.check()"> 
    {{facility.name}}</md-checkbox> 
</div>

来源

2017-02-15 John Stafford

你需要使用（其他城市）事件，而不是（点击），如下所示：

<md-checkbox [checked]="facility.checked" (change)="facility.check()">

否则，可能由于（点击）事件调用您的“检查”方法，您的“检查”布尔值的内容会搞砸。

<md-checkbox [(ngModel)]="facility.checked">

来源

2017-02-15 00:45:11

这是一个共同的解决办法：

此外，如果你想要的响应变化做的是保持布尔你可以用双向数据通过ngModel绑定，如下办呢？我明天会试一试。感谢您的答复。 –

我想说的是，更多的解决方法是处理md-checkbox选中状态更改的方式。我已经编辑了答案，使用ngModel添加一个选项，以防因维护该布尔值之外的原因而不需要响应更改事件。 –

工作。谢谢弗雷迪。 –

发生初始点击时出现奇怪的md-checkbox行为

回答

相关问题