Update Material Lite Kontrollkästchen mit Angular 2

Question

Ich versuche, Material Design Lite in Angular 2 zu verwenden und Probleme beim Aktualisieren der Kontrollkästchen, nachdem der Status geändert hat. Siehe die folgenden Plunker example.

Wenn der Benutzer auf "Alle" klickt, um alle Felder auszuwählen, werden nur die normalen Kontrollkästchen aktualisiert. Ich habe versucht, componentHandler.upgradeDom() und componentHandler.upgradeAllRegistered() zu verwenden, aber es machte keinen Unterschied.

Wie kann ich die Datenbindung funktionieren lassen?

Answer 1

Nach dem Lesen des MDL-Codes schien es mir, dass das Aussehen des MDL-Kontrollkästchens nur ändert, wenn es das Onchange-Ereignis sieht. Wenn Sie den Code jedoch nur "aktiviert" setzen, wird das geänderte Ereignis nicht übermittelt. Also, nachdem ich es eingestellt habe, mache ich einen Stich.

Nun, ich sage nicht, das ist die richtige oder beste Art, dies zu tun, aber es funktioniert für mich.

Answer 2

Ok, so hatte ich ein ähnliches Problem wie Sie, und nach gut 2 oder 3 Stunden googeln um, ich kam mit einer Lösung (oder vielleicht ist es nur ein schmutziger Hack, weiß nicht):

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [class.is-checked]="isChecked()"> 
    <input type="checkbox" [(ngModel)]="checkbox.Checked" class="mdl-checkbox__input"> 
    <span class="mdl-checkbox__label">A label</span> 
</label> 

ich habe die aktualisierte plunk Sie haben geteilt, so dass Sie es dort sehen. Ich hoffe das löst dein Problem, da es meines gelöst hat.