Javascript Angular 2和Material Design Lite无法更新输入

我在我的应用程序中遇到了一个问题，在窗体上使用带有Material Design Lite组件的ngModel时。我被警告必须创建一个指令，如示例代码所示

import {Directive, AfterViewChecked, AfterViewInit} from '@angular/core';

declare var componentHandler: any;

@Directive({
  selector: '[mdl]'
})
export class MDL implements AfterViewChecked, AfterViewInit{

  ngAfterViewChecked() {
    if (componentHandler) {
      componentHandler.upgradeAllRegistered();
    }
  }

  ngAfterViewInit(){
    if (componentHandler) {
      console.log('ngAfterViewInit ',componentHandler);
      componentHandler.upgradeAllRegistered();
    }    
  }
}

并在组件模板中使用：

<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
...
</div>

---

复选框的初始值不会呈现给用户。即使我使用选中的

属性启动输入。我不知道我是否清楚。
问题是MDL开关需要调用它，以便开关的UI反映
输入
元素的值。要做到这一点，你需要的不仅仅是一个指令。您需要一个具有
ControlValueAccessor
实现的组件-有关非MDL示例，请参阅。我尝试使用MDL API，但例如，在MDL开关中，对象
MaterialSwitch
未定义。我尝试
document.querySelector（“#ID_OF'）.MaterialSwitch.on（）
但是
MaterialSwitch
未定义。
MaterialSwitch
将在
mdl开关
类（标签

元素）的元素上定义

MaterialSwitch

。

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="remember">
    <span class="mdl-switch__label">{{strings.label_remember}}</span>  
    <input name="remember" type="checkbox" id="remember" class="mdl-switch__input" [(ngModel)]="sess.persistent">
</label>