如何将model.property绑定到angular-2-material日期选择器的ngModel？

Question

开始：我正在尝试使用angular-2材质组件创建表单。我有一个包含日期选择器的表单：

        <md-form-field>
          <input readonly="true" mdInput [mdDatepicker]="regDatePicker" placeholder="{{'client.regdate-placeholder'}}">
          <md-datepicker-toggle mdSuffix [for]="regDatePicker"></md-datepicker-toggle>
          <md-datepicker #regDatePicker  startView="month" [startAt]="currentDate"></md-datepicker>
        </md-form-field>

打字稿：

    public client: IPerson;
    @ViewChild("regDatePicker")
    public regDatePicker: MdDatepicker<Date>;

需要什么：要么将日期选择器的ngModel绑定到client.registrationDate，要么从后面的代码设置regDatePicker的值。

得到的结果：：如果[（值）]绑定，我会看到错误

Can't bind to 'mdDatepicker' since it isn't a known property of 'input'

尝试在代码后面设置它，但无法找到属性或字段的正确名称来设置值。

问题：为了绑定模型中的数据，我该怎么做？

UPD：添加了引用输入

的代码

@ViewChild("dpDateInput")
public dpDate: MdDatepickerInput<Date>;

public ngAfterViewInit(): void {
   console.log(`---------->>>>>>>>> before ${ this.dpDate.value}`)
   this.dpDate.value = this.client.regDate;
   console.log(`---------->>>>>>>>> after ${ this.dpDate.value}`);
}

Answer 1

在引用mdDatepickerInput时尝试使用mdDatepicker代替value。

修改

反映用户界面更改的一种方法是将ChangeDetectorRef注入组件的构造函数并调用其detectChanges()方法。

import { ChangeDetectorRef } from '@angular/core';

constructor (private ref: ChangeDetectorRef) {}

public ngAfterViewInit(): void {
   console.log(`---------->>>>>>>>> before ${ this.dpDate.value}`)
   this.dpDate.value = this.client.regDate;
   this.ref.detectChanges();
   console.log(`---------->>>>>>>>> after ${ this.dpDate.value}`);
}