以编程方式设置角度材料日期选择器值

Question

我在我的一个角项目组件中使用角材料日期选择器。该组件有两个选项卡。使用 *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');

}

但是当我向后导航时，不会保留日期值。有什么建议我怎样才能做到这一点？

Answer 1

它不起作用，因为您没有存储选定的值。所以在打字稿中创建一个变量：yourDate: any;HTML：<p> YourDate&nbsp; {{ yourDate | date }} </p><mat-form-field>&nbsp; &nbsp; <input matInput [(ngModel)]="yourDate" [matDatepicker]="picker" placeholder="Choose a date">&nbsp; &nbsp; <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>&nbsp; &nbsp; <mat-datepicker #picker></mat-datepicker></mat-form-field>

Answer 2

在您的示例中，您没有使用任何绑定。尝试使用[(ngModel)]，以便它将获取并保持选定的值。这样做，它会工作：<mat-form-field>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input matInput [(ngModel)]="date" [matDatepicker]="picker" placeholder="Choose a date">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <mat-datepicker #picker></mat-datepicker></mat-form-field>