Material Liteチェックボックス（角2）

Question

Material Design LiteをAngular 2で使用しようとしていますが、状態が変更された後にチェックボックスの更新に問題があります。 Plunker exampleを参照してください。

ユーザーが「すべて」をクリックしてすべてのボックスを選択すると、通常のチェックボックスのみが更新されます。私はcomponentHandler.upgradeDom()とcomponentHandler.upgradeAllRegistered()を使ってみましたが、違いはありません。

データバインディングを機能させるにはどうすればよいですか？

Answer 1

MDLコードを読んだあと、MDLチェックボックスの外観は、それがonchangeイベントを見るときだけ変わるように思えました。しかし、コードで "checked"を設定しても、変更されたイベントは配信されません。だから、私はそれを設定した後、私はそれを突っ込む。

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

これは正しいまたは最良の方法ではありませんが、それは私のために機能します。

Answer 2

ので、私はあなたのような同様の問題を抱えていたし、周りグーグルの良い2または3時間後、私は解決策を考え出した（または多分それはちょうど汚いハックだ、知りません）、[OK]を：

<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を更新しました。私はこれが私の問題を解決したので、これがあなたの問題を解決することを願っています。