Question

我收到了意外的复选框行为。

当我最初点击我的复选框时，我会转到Facility对象的check()函数，this.check为FALSE，就像它应该的那样。我的切换语句!this.checked正常工作，newState的值为TRUE。 在下一行，该TRUE值已分配给this.checked，我看到了涟漪，但未显示任何检查。

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

发生了什么事？

父TreeNode类

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>

Answer 1

您需要使用（更改）事件而不是（单击），如下所示：

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

否则，可能由于（click）事件调用你的“check”方法而导致你的“checked”布尔值的内容搞砸了。

此外，如果你想要做的只是改变是维护布尔值，你可以通过ngModel进行双向数据绑定，如下所示：

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

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

1 个答案: