材料设计精简版复选框与angular2

Question

在我的angular2应用程序中，我使用附加到各个模型的复选框。这些复选框被禁用，当模型值可用时，将检查它们。

options: { browserifyOptions : {} }

在我的组件中：

<div class="myCheck">
    <h5>You have choosen so far</h5>
    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Marriage Hall</span> 
    </label>

    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Caterer</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
        <input type="checkbox"  class="mdl-checkbox__input" disabled/>
        <span class="mdl-checkbox__label">Decorator</span>
    </label>
</div>

即使模型值为true，也会呈现复选框但没有复选标记。如果我删除componentHandler.upgradeAllRegistered（）;从OnInit材质样式丢失但正常复选框使用相应的复选标记呈现。见图像

究竟是什么问题？