javascript - 以编程方式设置 Angular Material 日期选择器值

Question

我正在我的 Angular 项目组件之一中使用 Angular Material 日期选择器。该组件有两个选项卡。使用 *ng 如果我根据用户单击的内容一次仅显示一个。在一个选项卡中，用户选择一个日期，如果导航到同一组件的其他选项卡并返回到上一个选项卡，我需要保留所选日期。

这就是我在 HTML 端所做的事情:

<mat-form-field class="dropdownWidth">
      <input #dateInput matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker"
             placeholder="Choose a date"
             [value]="datePickerDate"
             [(ngModel)]="datePickerDate"
             (dateChange)="addDateEvent($event)"
             [disabled]="selectedOperator.length === 0 && userDateRange.length === 0">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在TS文件中:

addDateEvent(event) {
   this.datePickerEvent = event;
   this.datePickerDate = new Date(`${event.value['_i'].month + 1}-${event.value['_i'].date}-${event.value['_i'].year}`);
   this.formatDate = moment(event.value).format('YYYY-MM-DD');
}

但是当我向后导航时，日期值不会保留。有什么建议我如何实现这一目标吗？

这是示例 stackblitz

Answer 1

它不起作用，因为您没有存储选定的值。因此，在 typescript 中创建一个变量:

yourDate: any;

HTML:

<p> YourDate  {{ yourDate | date }} </p>

<mat-form-field>
    <input matInput [(ngModel)]="yourDate" 
        [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

可以看到 whole code at stackblitz