Обновить материал Lite checkbox with Angular 2

Question

Я пытаюсь использовать Material Design Lite в Angular 2 и не могу обновить флажки после изменения состояния. См. Следующие Plunker example.

Когда пользователь нажимает кнопку «Все», чтобы выбрать все поля, обновляется только обычное обновление. Я пробовал использовать componentHandler.upgradeDom() и componentHandler.upgradeAllRegistered(), но это не имело значения.

Как я могу заставить привязку данных работать?

Answer 1

После прочтения MDL-кода мне показалось, что появление метки MDL изменяется только тогда, когда видит событие onchange. Но просто установка «проверено» в коде не доставляет измененное событие. Итак, после того, как я его установил, я даю ему совать.

function setChecked(element, bool) { 
    element.checked = bool; 
    var evt = document.createEvent("HTMLEvents"); 
    evt.initEvent("change", false, true); 
    element.dispatchEvent(evt); 
} 

Теперь, я не говорю, что это правильно или лучший способ сделать это, но это работает для меня.

Answer 2

Итак, у меня была аналогичная проблема, как вы, и после хорошего 2-х или 3-х часов погуглить вокруг, я пришел с решением (или, может быть, это просто грязный хак, не знаю):

<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> 

Я обновил plunk вы поделились, так что вы можете увидеть его там. Надеюсь, это решает вашу проблему, поскольку она решила мою проблему.