从打字稿打开角度 mat-datepicker

Question

我有一个这样的选择：

 <mat-select placeholder="..." (change)="onChange($event.value)">
     <mat-option *ngFor="let option of options" [value]="option.value">
        {{ option }}
     </mat-option>
 </mat-select>
 <div class="disable">
    <mat-form-field>
       <input matInput [matDatepicker]="picker" placeholder="Choose a date">
       <mat-datepicker #picker ></mat-datepicker>
    </mat-form-field>
 </div>

禁用类只是隐藏div的包含。

在我的 onChange($event) 中：

onChange(value) {
   if(value === 'someValue'){
       openDatePicker() //How to do this ??
   }
}

如果选择了特定值，我想打开日期选择器。 可以从打字稿中做到这一点吗？

感谢您的回复

Answer 1

对于那些试图让它在最新版本的 Angular 上工作的人，您需要向 @ViewChild 添加第二个参数：

  @ViewChild('picker', {read: undefined, static: false}) datePicker: MatDatepicker<Date>;

并在您的函数中定期引用该对象：

onChange(value) {
  if(value === 'someValue'){
    this.datePicker.open();
  }
}

Answer 2

您需要使用ViewChild 在代码中获取日期选择器，如下所示：

@ViewChild('picker') datePicker: MatDatepicker<Date>;

然后在你的函数中，可以调用datepicker的open()方法：

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}

链接到StackBlitz demo。

Answer 3

在 TS 中使用 ViewChild 创建日期选择器对象：

@ViewChild('picker') datePicker: MatDatepicker;

使用MatDatepicker 的预定义方法open 作为：

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}