为什么使用 Angular 清除日期输入会给出不同的结果？

Question

我的 Angular 项目中有一个组件，它显示了用户选择的特定日期的图表。日期输入中的值必须是有效日期。所以当点击日期选择器上的 x 按钮时，它应该转到当前日期而不是空白。

这是html：

<input class="form-control input-sm" type="date" name="endDate" 
        [ngModel]="endDate | date:'yyyy-MM-dd'" (ngModelChange)="setEndDate($event);">

以及组件TS文件中的如下代码：

endDate = new Date();

setEndDate(newValue) {

  if(newValue) {
    this.endDate = newValue;
    return;
  }

  this.endDate = new Date();
}

我无法理解的是，有时它有效，有时却无效。 Specifically, when the date in the picker is not the current date, clicking the x results in it becoming the current date as intended. When the date in the picker is the current date, it goes blank and shows mm/dd/yyyy.它应该保持在当前日期。

从测试来看，似乎正在设置值，但由于某种原因选择器没有更新。我试过改变绑定，但这只会导致它完全破坏。任何可以解释为什么这有时有效但有时无效的任何信息将不胜感激。

stackblitz：https://stackblitz.com/edit/angular-oep55t

Answer 1

我使用 viewChild 来设置 nativeElement 的值。看起来 endDate 在清除值后从未通过输入日期。我在 ts 文件中使用了 datePipe 来格式化日期。不要忘记将日期管道添加到模块中的提供程序中。

https://stackblitz.com/edit/angular-268qje

让我知道它是否适合您。