使用 Angular 2 更新 Material Lite 复选框答案

【问题标题】：Update Material Lite checkbox with Angular 2使用 Angular 2 更新 Material Lite 复选框
【发布时间】：2016-04-05 16:18:37
【问题描述】：

我正在尝试在 Angular 2 中使用 Material Design Lite，但在状态更改后更新复选框时遇到了问题。请参阅以下Plunker example。

当用户单击“全部”以选择所有框时，只有正常的复选框会更新。我尝试过使用componentHandler.upgradeDom() 和componentHandler.upgradeAllRegistered()，但没有任何区别。

我怎样才能让数据绑定工作？

【问题讨论】：

标签： checkbox angular material-design-lite

【解决方案1】：

好的，所以我遇到了和你类似的问题，经过 2 或 3 个小时的谷歌搜索，我想出了一个解决方案（或者也许这只是一个 肮脏的 hack，不要知道）：

<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，以便您可以在那里看到它。我希望这能解决你的问题，因为它已经解决了我的问题。

【讨论】：

【解决方案2】：

阅读 MDL 代码后，在我看来，MDL 复选框的外观只有在看到 onchange 事件时才会改变。但是仅在代码中设置“已检查”并不会传递更改的事件。所以，在我设置好之后，我给它戳了戳。

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

现在，我并不是说这是正确或最佳的方法，但它对我有用。

【讨论】：

有没有好办法获取我的复选框元素的引用？