發生初始點擊時出現奇怪的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行爲

回答

相關問題