Merkwürdiges md-checkbox Verhalten, wenn anfängliches Klicken geschieht

Question

Ich erhalte ein unerwartetes Checkboxverhalten.

Wenn ich zunächst auf meine Checkbox klicke, komme ich zur Funktion check() des Facility-Objekts, und this.check ist FALSE, wie es sein sollte. Meine Toggle-Anweisung !this.checked funktioniert entsprechend, und dem NewState wird der Wert TRUE zugewiesen. In der nächsten Zeile, der Wert TRUE ist this.checked zugewiesen, sehe ich die Welligkeit, aber keine Überprüfung erscheint.

Wenn ich dieses Kontrollkästchen später anklicke, komme ich wieder zur check() - Funktion des Facility-Objekts, und obwohl das Kontrollkästchen nicht aktiviert ist, ist dieser.check-Wert TRUE. Meine toggle-Anweisung funktioniert wieder, und der newState hat den Wert FALSE, und this.checked ist jetzt FALSE. Seltsamerweise erscheint danach der Scheck.

Was ist los?

Elternteil TreeNode Klasse

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

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

Kindersitz Klasse

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-Code, iteriert über eine Einrichtung Array

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

Answer 1

Sie müssen statt den (ändern) Ereignis verwendet werden (Klick), so:

Ansonsten

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

, möglicherweise aufgrund zu welchem ​​Zeitpunkt des (Klick) Ereignis ruft Ihre „check“ Methode, der Inhalt Ihrer „geprüft“ boolean erhalten vermasselt.

Außerdem, wenn alles, was Sie in Reaktion auf die Änderung tun möchten, ist die Boolesche pflegen können Sie es mit Zweiwege-Daten tun über ngModel Bindung wie folgt:

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