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

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

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

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

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

链接到StackBlitz demo。

Answer 2

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

@ViewChild('picker') datePicker: MatDatepicker;

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

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

Answer 3

对于那些试图使其在最新版本的Angular上运行的用户，您需要在@ViewChild中添加第二个参数：

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

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

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

从打字稿中打开角度mat-datepicker

3 个答案: